feat: DeploymentHistoryConfigDiff - uat changes, code refactor

RohitRaj011 · RohitRaj011 · commit 315a320d3a44 · 2024-10-13T15:31:10.000+05:30
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'
 import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 
 import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
-import { useAsync } from '@Common/Helper'
+import { capitalizeFirstLetter, useAsync } from '@Common/Helper'
 import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
@@ -114,17 +114,20 @@ export const DeploymentHistoryConfigDiff = ({
     )
 
     const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
+    const errorConfig = {
+        code: compareDeploymentConfigErr?.code,
+        error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
+        message: capitalizeFirstLetter(compareDeploymentConfigErr?.errors[0]?.userMessage || ''),
+        reload: reloadCompareDeploymentConfig,
+    }
+
     return (
         <Switch>
             <Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
                 <DeploymentHistoryConfigDiffCompare
                     {...deploymentConfigList}
                     isLoading={isLoading}
-                    errorConfig={{
-                        code: compareDeploymentConfigErr?.code,
-                        error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
-                        reload: reloadCompareDeploymentConfig,
-                    }}
+                    errorConfig={errorConfig}
                     envName={envName}
                     wfrId={wfrId}
                     previousWfrId={previousWfrId}
@@ -140,8 +143,9 @@ export const DeploymentHistoryConfigDiff = ({
             <Route>
                 {compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
                     <ErrorScreenManager
-                        code={compareDeploymentConfigErr?.code}
-                        reload={reloadCompareDeploymentConfig}
+                        code={errorConfig.code}
+                        subtitle={errorConfig.message}
+                        reload={errorConfig.reload}
                     />
                 ) : (
                     <div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
@@ -64,24 +64,32 @@ export const DeploymentHistoryConfigDiffCompare = ({
     }
 
     const selectorsConfig: DeploymentConfigDiffProps['selectorsConfig'] = {
-        primaryConfig: [
-            {
-                id: 'deployment-config-diff-deployment-selector',
-                type: 'selectPicker',
-                selectPickerProps: {
-                    name: 'deployment-config-diff-deployment-selector',
-                    inputId: 'deployment-config-diff-deployment-selector',
-                    classNamePrefix: 'deployment-config-diff-deployment-selector',
-                    variant: SelectPickerVariantType.BORDER_LESS,
-                    options: pipelineDeploymentsOptions,
-                    placeholder: 'Select Deployment',
-                    value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),
-                    onChange: deploymentSelectorOnChange,
-                    showSelectedOptionIcon: false,
-                    menuSize: ComponentSizeType.large,
-                },
-            },
-        ],
+        primaryConfig: pipelineDeploymentsOptions.length
+            ? [
+                  {
+                      id: 'deployment-config-diff-deployment-selector',
+                      type: 'selectPicker',
+                      selectPickerProps: {
+                          name: 'deployment-config-diff-deployment-selector',
+                          inputId: 'deployment-config-diff-deployment-selector',
+                          classNamePrefix: 'deployment-config-diff-deployment-selector',
+                          variant: SelectPickerVariantType.BORDER_LESS,
+                          options: pipelineDeploymentsOptions,
+                          placeholder: 'Select Deployment',
+                          value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),
+                          onChange: deploymentSelectorOnChange,
+                          showSelectedOptionIcon: false,
+                          menuSize: ComponentSizeType.large,
+                      },
+                  },
+              ]
+            : [
+                  {
+                      id: 'no-previous-deployment',
+                      type: 'string',
+                      text: 'No previous deployment',
+                  },
+              ],
         secondaryConfig: [
             {
                 id: 'base-configuration',
@@ -109,6 +117,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
             {...props}
             showDetailedDiffState
             navHeading={`Comparing ${envName}`}
+            headerText={!pipelineDeploymentsOptions.length ? '' : undefined} // using `undefined` to ensure component picks default value
             navHelpText={
                 compareWfrId
                     ? `Showing diff in configuration deployed on: ${pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId).label} & ${currentDeployment}`
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
@@ -34,10 +34,11 @@ const DeploymentHistoryDiffView = ({
     isUnpublished,
     isDeleteDraft,
     rootClassName,
-    sortBy = '',
-    sortOrder = null,
+    sortingConfig,
+    codeEditorKey,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
+    const { sortBy, sortOrder } = sortingConfig ?? { sortBy: '', sortOrder: null }
 
     const [convertVariables, setConvertVariables] = useState(false)
 
@@ -86,7 +87,7 @@ const DeploymentHistoryDiffView = ({
 
     const renderDeploymentDiffViaCodeEditor = () => (
         <CodeEditor
-            key={JSON.stringify(editorValuesLHS)}
+            key={codeEditorKey}
             value={editorValuesRHS}
             defaultValue={editorValuesLHS}
             adjustEditorHeightToContent
@@ -177,7 +178,7 @@ const DeploymentHistoryDiffView = ({
             {(currentConfiguration?.codeEditorValue?.value || baseTemplateConfiguration?.codeEditorValue?.value) && (
                 <div className="en-2 bw-1 br-4 mt-16">
                     <div
-                        className="code-editor-header-value pl-16 pr-16 pt-12 pb-12 fs-13 fw-6 cn-9 bcn-0 dc__top-radius-4 dc__border-bottom"
+                        className="code-editor-header-value px-12 py-8 fs-13 fw-6 cn-9 bcn-0 dc__top-radius-4 dc__border-bottom"
                         data-testid="configuration-link-comparison-body-heading"
                     >
                         <span>{baseTemplateConfiguration?.codeEditorValue?.displayName}</span>
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
@@ -29,7 +29,7 @@ export const renderDeploymentHistoryConfig = (
     heading: string,
     pathname: string,
 ) => (
-    <div className="dc__border br-4">
+    <div className="dc__border br-4 dc__overflow-hidden">
         {heading && (
             <div className="px-16 py-8 dc__border-bottom-n1">
                 <h4 className="m-0 cn-7 fs-12 lh-20 fw-6">{heading}</h4>
@@ -41,7 +41,7 @@ export const renderDeploymentHistoryConfig = (
             return (
                 <NavLink
                     key={id}
-                    className={`cursor dc__no-decor px-16 py-12 flex dc__content-space ${index !== config.length - 1 ? 'dc__border-bottom-n1' : ''}`}
+                    className={`cursor dc__no-decor px-16 py-12 flex dc__content-space dc__hover-n50 ${index !== config.length - 1 ? 'dc__border-bottom-n1' : ''}`}
                     to={href}
                 >
                     <p className="m-0 flex dc__gap-8">
@@ -73,7 +73,7 @@ export const renderPipelineDeploymentOptionDescription = ({
     runSource,
 }: Pick<History, 'triggeredBy' | 'triggeredByEmail' | 'artifact' | 'stage'> &
     Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'resourceId' | 'runSource'>) => (
-    <div>
+    <div className="flexbox-col dc__gap-4">
         <p className="m-0 fs-12 lh-20 cn-7 flex dc__gap-4">
             <span className="dc__capitalize">{stage}</span>
             <span className="dc__bullet dc__bullet--d2" />
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
@@ -10,7 +10,12 @@ import { DeploymentHistoryConfigDiffProps } from './types'
 
 export const getPipelineDeployments = (triggerHistory: DeploymentHistoryConfigDiffProps['triggerHistory']) =>
     Array.from(triggerHistory)
-        .filter(([, value]) => value?.stage === DeploymentStageType.DEPLOY)
+        .filter(
+            ([, value]) =>
+                // TODO: check with Prakash when API returns this erro
+                // (!value.message || value.message !== 'pg: no rows in result set') &&
+                value.stage === DeploymentStageType.DEPLOY,
+        )
         .map(([, value]) => value)
 
 export const getPipelineDeploymentsWfrIds = ({
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
@@ -488,8 +488,11 @@ export interface DeploymentTemplateHistoryType {
     isUnpublished?: boolean
     isDeleteDraft?: boolean
     rootClassName?: string
-    sortBy?: string
-    sortOrder?: SortingOrder
+    codeEditorKey?: React.Key
+    sortingConfig?: {
+        sortBy: string
+        sortOrder: SortingOrder
+    }
 }
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
@@ -45,7 +45,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                 >
                                     <headerIconConfig.Icon
                                         {...headerIconConfig.props}
-                                        className={`icon-dim-20 ${headerIconConfig.props?.className || ''}`}
+                                        className={`icon-dim-20 p-2 ${headerIconConfig.props?.className || ''}`}
                                     />
                                 </button>
                             </ConditionalWrap>
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -65,6 +65,8 @@ export interface DeploymentConfigDiffProps {
     errorConfig?: {
         error: boolean
         code: number
+        message?: string
+        redirectURL?: string
         reload: () => void
     }
     configList: DeploymentConfigListItem[]
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
@@ -186,7 +186,7 @@ export const DeploymentConfigDiffMain = ({
                                 <div className="px-12 py-6">{secondaryHeading}</div>
                             </div>
                             <CodeEditor
-                                key={`${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
+                                key={`${sortingConfig?.sortBy}-${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
                                 diffView
                                 defaultValue={primaryList.codeEditorValue.value}
                                 value={secondaryList.codeEditorValue.value}
@@ -206,12 +206,12 @@ export const DeploymentConfigDiffMain = ({
                                 </div>
                             )}
                             <DeploymentHistoryDiffView
+                                codeEditorKey={`${sortingConfig?.sortBy}-${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
                                 baseTemplateConfiguration={secondaryList}
                                 currentConfiguration={primaryList}
                                 previousConfigAvailable
                                 rootClassName={`${primaryHeading && secondaryHeading ? 'dc__no-top-radius dc__no-top-border' : ''}`}
-                                sortBy={sortingConfig?.sortBy}
-                                sortOrder={sortingConfig?.sortOrder}
+                                sortingConfig={sortingConfig}
                             />
                         </div>
                     )}
@@ -239,7 +239,14 @@ export const DeploymentConfigDiffMain = ({
                 </div>
             </div>
             <div className="deployment-config-diff__main-content dc__overflow-y-auto">
-                {errorConfig?.error && <ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />}
+                {errorConfig?.error && (
+                    <ErrorScreenManager
+                        code={errorConfig.code}
+                        subtitle={errorConfig.message}
+                        redirectURL={errorConfig.redirectURL}
+                        reload={errorConfig.reload}
+                    />
+                )}
                 {!errorConfig?.error &&
                     (isLoading ? (
                         <Progressing fullHeight size={48} />
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -44,7 +44,7 @@ export const DeploymentConfigDiffNavigation = ({
                 ? {
                       iconConfig: {
                           Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
-                          props: { className: 'icon-dim-16 dc__no-shrink' },
+                          props: { className: 'dc__no-shrink' },
                           tooltipProps: {
                               content: showDetailedDiffState
                                   ? diffStateTooltipTextMap[diffState]
diff --git a/src/Shared/Services/app.types.ts b/src/Shared/Services/app.types.ts
@@ -278,6 +278,7 @@ export interface TemplateListDTO {
     finishedOn?: string
     status?: string
     pipelineId?: number
+    wfrId?: number
 }
 
 export interface ManifestTemplateDTO {

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP`
`45`	`45`	`>`
`46`	`46`	`<headerIconConfig.Icon`
`47`	`47`	`{...headerIconConfig.props}`
`48`		- className={`icon-dim-20 ${headerIconConfig.props?.className \|\| ''}`}
	`48`	+ className={`icon-dim-20 p-2 ${headerIconConfig.props?.className \|\| ''}`}
`49`	`49`	`/>`
`50`	`50`	`</button>`
`51`	`51`	`</ConditionalWrap>`
Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,8 @@ export interface DeploymentConfigDiffProps {`
`65`	`65`	`errorConfig?: {`
`66`	`66`	`error: boolean`
`67`	`67`	`code: number`
	`68`	`+ message?: string`
	`69`	`+ redirectURL?: string`
`68`	`70`	`reload: () => void`
`69`	`71`	`}`
`70`	`72`	`configList: DeploymentConfigListItem[]`