chore: DeploymentConfigDiff - add support for item to scroll into view after accordion transition

Author: RohitRaj011

package-lock.json

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

package.json

@@ -2,7 +2,7 @@ import { useEffect, useState, useRef } from 'react'
 
 import { CollapseProps } from './types'
 
-export const Collapse = ({ expand, children }: CollapseProps) => {
+export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
     const ref = useRef<HTMLDivElement>(null)
     const [contentHeight, setContentHeight] = useState(0)
 
@@ -16,10 +16,10 @@ export const Collapse = ({ expand, children }: CollapseProps) => {
         <div
             style={{
                 height: expand ? contentHeight : 0,
-                transitionProperty: 'height',
-                transitionDuration: '0.3s',
+                transition: 'height 200ms ease-out',
                 overflow: 'hidden',
             }}
+            onTransitionEnd={onTransitionEnd}
         >
             <div ref={ref}>{children}</div>
         </div>

src/Shared/Components/Collapse/Collapse.tsx

@@ -1 +1,2 @@
 export * from './Collapse'
+export * from './types'

src/Shared/Components/Collapse/index.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react'
+import { ReactNode, TransitionEvent } from 'react'
 
 export interface CollapseProps {
     expand: boolean
     children: ReactNode
+    onTransitionEnd?: (e: TransitionEvent<HTMLDivElement>) => void
 }

src/Shared/Components/Collapse/types.ts

@@ -6,13 +6,13 @@ import { Collapse } from '../Collapse'
 import { DeploymentConfigDiffAccordionProps } from './types'
 
 export const DeploymentConfigDiffAccordion = forwardRef<HTMLDivElement, DeploymentConfigDiffAccordionProps>(
-    ({ hasDiff, children, title, id, isExpanded, handleOnClick }, ref) => (
+    ({ hasDiff, children, title, id, isExpanded, onClick, onTransitionEnd }, ref) => (
         <div ref={ref} id={id} className="dc__border br-4 deployment-config-diff__accordion">
             <button
                 type="button"
                 className="dc__unset-button-styles px-16 py-10 flexbox dc__align-items-center dc__gap-8 w-100 br-4 bcn-50 dc__position-sticky dc__top-0 dc__zi-10"
                 aria-label="expand-collapse-btn"
-                onClick={handleOnClick}
+                onClick={onClick}
             >
                 <ICCaretDown
                     className="icon-dim-16 fsn-6 rotate"
@@ -23,7 +23,9 @@ export const DeploymentConfigDiffAccordion = forwardRef<HTMLDivElement, Deployme
                     className={`m-0 fs-13 lh-20 fw-6 ${hasDiff ? 'cy-7' : 'cg-7'}`}
                 >{`${hasDiff ? 'Has' : 'No'} difference`}</p>
             </button>
-            <Collapse expand={isExpanded}>{children}</Collapse>
+            <Collapse expand={isExpanded} onTransitionEnd={onTransitionEnd}>
+                {children}
+            </Collapse>
         </div>
     ),
 )

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx

@@ -29,6 +29,13 @@ export const DeploymentConfigDiffMain = ({
         })
     }
 
+    const handleTransitionEnd = () => {
+        if (scrollIntoViewId) {
+            const element = document.querySelector(`#${scrollIntoViewId}`)
+            element?.scrollIntoView({ block: 'start' })
+        }
+    }
+
     useEffect(() => {
         if (!isLoading) {
             setExpandedView(
@@ -114,7 +121,8 @@ export const DeploymentConfigDiffMain = ({
                     title={title}
                     isExpanded={expandedView[id]}
                     hasDiff={hasDiff}
-                    handleOnClick={handleAccordionClick(id)}
+                    onClick={handleAccordionClick(id)}
+                    onTransitionEnd={handleTransitionEnd}
                 >
                     {isDeploymentTemplate ? (
                         <>

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

@@ -3,6 +3,7 @@ import { SortingOrder } from '@Common/Constants'
 import { DeploymentHistoryDetail } from '../CICDHistory'
 import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
 import { SelectPickerProps } from '../SelectPicker'
+import { CollapseProps } from '../Collapse'
 
 export interface DeploymentConfigType {
     list: DeploymentHistoryDetail
@@ -74,11 +75,11 @@ export interface DeploymentConfigDiffMainProps
         'isLoading' | 'headerText' | 'configList' | 'scrollIntoViewId' | 'selectorsConfig' | 'sortingConfig'
     > {}
 
-export interface DeploymentConfigDiffAccordionProps {
+export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps, 'onTransitionEnd'> {
     id: string
     title: string
     children: React.ReactNode
     hasDiff?: boolean
     isExpanded?: boolean
-    handleOnClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
 }