feat: add custom renderer for null state and generic section error state

Author: eshankvaish

src/Assets/Icon/ic-info-outline.svg

@@ -38,7 +38,6 @@ const DeploymentHistoryDiffView = ({
     rootClassName,
     sortingConfig,
     codeEditorKey,
-    diffState,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
     const { sortBy, sortOrder } = sortingConfig ?? { sortBy: '', sortOrder: null }
@@ -93,7 +92,7 @@ const DeploymentHistoryDiffView = ({
             <DiffViewer
                 oldValue={editorValuesLHS}
                 newValue={editorValuesRHS}
-                codeFoldMessageRenderer={renderDiffViewNoDifferenceState(diffState)}
+                codeFoldMessageRenderer={renderDiffViewNoDifferenceState(editorValuesLHS, editorValuesRHS)}
             />
         ) : (
             <CodeEditor

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

@@ -32,7 +32,6 @@ import {
 import { DeploymentStageType } from '../../constants'
 import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types'
 import { TERMINAL_STATUS_MAP } from './constants'
-import { DeploymentConfigDiffState } from '../DeploymentConfigDiff'
 
 export enum HistoryComponentType {
     CI = 'CI',
@@ -494,7 +493,6 @@ export interface DeploymentTemplateHistoryType {
         sortBy: string
         sortOrder: SortingOrder
     }
-    diffState: DeploymentConfigDiffState
 }
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail

src/Shared/Components/CICDHistory/types.tsx

@@ -14,7 +14,7 @@ import {
     prepareHistoryData,
     GenericSectionErrorState,
 } from '@Shared/Components'
-import { deepEqual } from '@Common/Helper'
+import { deepEqual, noop } from '@Common/Helper'
 
 import { ManifestTemplateDTO } from '@Pages/Applications'
 import {
@@ -831,15 +831,19 @@ export const getDefaultVersionAndPreviousDeploymentOptions = (data: TemplateList
     )
 
 export const renderDiffViewNoDifferenceState = (
-    diffState: DeploymentConfigDiffState | null,
+    lhsValue: string,
+    rhsValue: string,
 ): DiffViewerProps['codeFoldMessageRenderer'] =>
-    diffState !== DeploymentConfigDiffState.NO_DIFF
+    lhsValue === rhsValue
         ? () => (
               <GenericSectionErrorState
                   useInfoIcon
-                  title="There seems no difference in the compared values"
-                  subTitle="Click here to view the values"
+                  title="No diff in configurations"
+                  subTitle=""
                   description=""
+                  buttonText="View values"
+                  // Click event is handled at the parent level
+                  reload={noop}
               />
           )
         : null

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx

@@ -196,7 +196,10 @@ export const DeploymentConfigDiffMain = ({
                             newValue={secondaryList.codeEditorValue.value}
                             leftTitle={primaryHeading}
                             rightTitle={secondaryHeading}
-                            codeFoldMessageRenderer={renderDiffViewNoDifferenceState(diffState)}
+                            codeFoldMessageRenderer={renderDiffViewNoDifferenceState(
+                                primaryList.codeEditorValue.value,
+                                secondaryList.codeEditorValue.value,
+                            )}
                         />
                     ) : (
                         <div className="p-16">
@@ -213,7 +216,6 @@ export const DeploymentConfigDiffMain = ({
                                 previousConfigAvailable
                                 rootClassName={`${primaryHeading && secondaryHeading ? 'dc__no-top-radius dc__no-top-border' : ''}`}
                                 sortingConfig={sortingConfig}
-                                diffState={diffState}
                             />
                         </div>
                     )}

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
+import { ComponentSizeType } from '@Shared/constants'
 import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-error-exclamation.svg'
-import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-exclamation.svg'
+import { ReactComponent as ICInfoOutline } from '../../../Assets/Icon/ic-info-outline.svg'
+import { Button, ButtonVariantType } from '../Button'
 import { GenericSectionErrorStateProps } from './types'
 
 const GenericSectionErrorState = ({
@@ -30,27 +32,28 @@ const GenericSectionErrorState = ({
 }: GenericSectionErrorStateProps) => (
     <div className={`flex column dc__gap-8 p-16 ${withBorder ? 'dc__border br-4' : ''} ${rootClassName || ''}`}>
         {useInfoIcon ? (
-            <InfoIcon className="icon-dim-24 fcn-6" />
+            <ICInfoOutline className="icon-dim-24" />
         ) : (
             <ErrorIcon className="icon-dim-24 alert-icon-r5-imp" />
         )}
         <div className="flex column dc__gap-4 dc__align-center">
             <h3 className="fs-13 lh-20 fw-6 cn-9 m-0">{title}</h3>
-            <div className="flex column fs-13 lh-20 fw-4 cn-7">
-                {subTitle && <p className="m-0">{subTitle}</p>}
-                {description && <p className="m-0">{description}</p>}
-            </div>
+            {(subTitle || description) && (
+                <div className="flex column fs-13 lh-20 fw-4 cn-7">
+                    {subTitle && <p className="m-0">{subTitle}</p>}
+                    {description && <p className="m-0">{description}</p>}
+                </div>
+            )}
         </div>
 
         {reload && (
-            <button
-                type="button"
-                className="cta text h-20 fs-13 lh-20-imp"
+            <Button
+                text={buttonText}
                 onClick={reload}
-                data-testid="generic-section-reload-button"
-            >
-                {buttonText}
-            </button>
+                variant={ButtonVariantType.text}
+                size={ComponentSizeType.small}
+                dataTestId="generic-section-reload-button"
+            />
         )}
     </div>
 )