refactor: Update ImageChipCell component to toggle expand state and use it in TriggerDetails

Author: AbhishekA1509

src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistoryConfigList.component.tsx

@@ -62,7 +62,7 @@ const DeploymentHistoryConfigList = ({
                     setFullScreenView(false)
                 }}
                 data-testid={`configuration-link-option-${index}`}
-                className="bcb-1 dc__no-decor bcn-0 cn-9 pl-16 pr-16 pt-12 pb-12 br-4 en-2 bw-1 mb-12 flex dc__content-space cursor lh-20"
+                className="bcb-1 dc__no-decor bcn-0 cn-9 pl-16 pr-16 pt-12 pb-12 br-4 en-2 bw-1 flex dc__content-space cursor lh-20"
             >
                 {childComponentName || currentComponent.DISPLAY_NAME}
                 <ICChevron className="icon-dim-20 fcn-6 dc__flip-270" />
@@ -87,7 +87,7 @@ const DeploymentHistoryConfigList = ({
                     <div className="px-20 pt-20 fs-13 cn-9" key={`history-list__${index}`}>
                         {historicalComponent.childList?.length > 0 ? (
                             <>
-                                <div className="fs-14 fw-6">
+                                <div className="fs-14 fw-6 mb-12">
                                     {DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[historicalComponent.name].DISPLAY_NAME}
                                 </div>
                                 {historicalComponent.childList.map((historicalComponentName, childIndex) =>

src/Shared/Components/ImageChipCell/ImageChipCell.component.tsx

@@ -14,44 +14,54 @@
  * limitations under the License.
  */
 
+import { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { noop } from '@Common/Helper'
 import { ReactComponent as DockerIcon } from '../../../Assets/Icon/ic-docker.svg'
 import { ImageChipCellProps } from './types'
 import './imageChipCell.scss'
 
 const ImageChipCell = ({
     imagePath,
     registryType,
-    handleClick = noop,
-    isExpanded = false,
+    handleClick,
+    isExpanded: isExpandedProp,
     placement = 'auto',
-}: ImageChipCellProps) => (
-    <div className="cn-7 fs-14 lh-20 flexbox">
-        <Tippy content={imagePath} className="default-tt" placement={placement} arrow={false}>
-            <button
-                type="button"
-                className={`display-grid dc__align-items-center image-chip-cell__container ${isExpanded ? 'image-chip-cell__container--expanded' : ''} bcn-1 br-6 dc__transparent py-0 px-6 cursor max-w-100`}
-                onClick={handleClick}
-            >
-                {registryType ? (
-                    <div className={`h-14 w-14 dc__registry-icon ${registryType} br-8 dc__no-shrink`} />
-                ) : (
-                    <DockerIcon className="icon-dim-14 mw-14" />
-                )}
-                {isExpanded ? (
-                    <div className="mono dc__ellipsis-left direction-left">{imagePath}</div>
-                ) : (
-                    <>
-                        <div>…</div>
-                        <div className="mono dc__ellipsis-left direction-left text-overflow-clip">
-                            {imagePath.split(':').slice(-1)[0] ?? ''}
-                        </div>
-                    </>
-                )}
-            </button>
-        </Tippy>
-    </div>
-)
+}: ImageChipCellProps) => {
+    const [isExpandedState, setIsExpandedState] = useState<boolean>(false)
+
+    const handleToggleExpand = () => {
+        setIsExpandedState((prev) => !prev)
+    }
+
+    const isExpanded = isExpandedProp ?? isExpandedState
+
+    return (
+        <div className="cn-7 fs-14 lh-20 flexbox">
+            <Tippy content={imagePath} className="default-tt" placement={placement} arrow={false}>
+                <button
+                    type="button"
+                    className={`display-grid dc__align-items-center dc__select-text image-chip-cell__container ${isExpanded ? 'image-chip-cell__container--expanded' : ''} bcn-1 br-6 dc__transparent py-0 px-6 cursor max-w-100`}
+                    onClick={handleClick || handleToggleExpand}
+                >
+                    {registryType ? (
+                        <div className={`h-14 w-14 dc__registry-icon ${registryType} br-8 dc__no-shrink`} />
+                    ) : (
+                        <DockerIcon className="icon-dim-14 mw-14" />
+                    )}
+                    {isExpanded ? (
+                        <div className="mono dc__ellipsis-left direction-left">{imagePath}</div>
+                    ) : (
+                        <>
+                            <div>…</div>
+                            <div className="mono dc__ellipsis-left direction-left text-overflow-clip">
+                                {imagePath.split(':').slice(-1)[0] ?? ''}
+                            </div>
+                        </>
+                    )}
+                </button>
+            </Tippy>
+        </div>
+    )
+}
 
 export default ImageChipCell

src/Shared/Components/ImageChipCell/types.ts

@@ -17,10 +17,18 @@ import Tippy from '@tippyjs/react'
 import { ComponentProps, SyntheticEvent } from 'react'
 import { RegistryType } from '../../types'
 
-export interface ImageChipCellProps {
+type ImageChipCellButtonActionProps =
+    | {
+          handleClick: (e: SyntheticEvent) => void
+          isExpanded: boolean
+      }
+    | {
+          handleClick?: never
+          isExpanded?: never
+      }
+
+export type ImageChipCellProps = {
     imagePath: string
-    isExpanded?: boolean
-    handleClick?: (e: SyntheticEvent) => void
     registryType?: RegistryType
     placement?: ComponentProps<typeof Tippy>['placement']
-}
+} & ImageChipCellButtonActionProps