refactor: Update ImageChipCell component and use it in TriggerDetails

Author: AbhishekA1509

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -32,7 +32,6 @@ import {
     useAsync,
     not,
     ZERO_TIME_STRING,
-    extractImage,
     useInterval,
     URLS,
     ServerError,
@@ -60,13 +59,13 @@ import { getTagDetails, getTriggerDetails, cancelCiTrigger, cancelPrePostCdTrigg
 import { DEFAULT_ENV, TIMEOUT_VALUE, WORKER_POD_BASE_URL } from './constants'
 import { GitTriggers } from '../../types'
 import warn from '../../../Assets/Icon/ic-warning.svg'
-import docker from '../../../Assets/Icon/ic-docker.svg'
 import { LogsRenderer } from './LogsRenderer'
 import DeploymentDetailSteps from './DeploymentDetailSteps'
 import { DeploymentHistoryDetailedView, DeploymentHistoryConfigList } from './DeploymentHistoryDiff'
 import { GitChanges, Scroller } from './History.components'
 import Artifacts from './Artifacts'
 import { statusColor as colorMap, EMPTY_STATE_STATUS, PULSATING_STATUS_MAP } from '../../constants'
+import { ImageChipCell } from '../ImageChipCell'
 import './cicdHistory.scss'
 
 const Finished = React.memo(
@@ -88,10 +87,7 @@ const Finished = React.memo(
             {type === HistoryComponentType.CI && artifact && (
                 <>
                     <div className="dc__bullet" />
-                    <div className="dc__app-commit__hash">
-                        <img src={docker} alt="docker" className="commit-hash__icon grayscale" />
-                        {extractImage(artifact)}
-                    </div>
+                    <ImageChipCell imagePath={artifact} placement="top" />
                 </>
             )}
         </div>
@@ -111,7 +107,7 @@ const WorkerStatus = React.memo(
         const getViewWorker = () =>
             showLink ? (
                 <NavLink to={`${WORKER_POD_BASE_URL}/${workerPodName}/logs`} target="_blank" className="anchor">
-                    <div className="mr-10">View worker pod</div>
+                    <span className="mr-10 fs-13">View worker pod</span>
                 </NavLink>
             ) : null
 
@@ -310,14 +306,7 @@ const StartDetails = ({
 
                 {type === HistoryComponentType.CD ? (
                     // eslint-disable-next-line react/jsx-no-useless-fragment
-                    <>
-                        {artifact && (
-                            <div className="dc__app-commit__hash" data-testid="docker-image-hash">
-                                <img src={docker} alt="docker" className="commit-hash__icon grayscale" />
-                                {artifact.split(':')[1]}
-                            </div>
-                        )}
-                    </>
+                    <>{artifact && <ImageChipCell imagePath={artifact} placement="top" />}</>
                 ) : (
                     Object.keys(gitTriggers ?? {}).length > 0 &&
                     ciMaterials?.map((ciMaterial) => {

src/Shared/Components/CICDHistory/cicdHistory.scss

@@ -211,7 +211,7 @@
 
     &:hover {
         text-decoration: unset;
-        background: var(--N100);
+        background: var(--N50);
     }
 
     &.active {

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

@@ -15,13 +15,20 @@
  */
 
 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 = ({ handleClick, imagePath, isExpanded, registryType }: ImageChipCellProps) => (
+const ImageChipCell = ({
+    imagePath,
+    registryType,
+    handleClick = noop,
+    isExpanded = false,
+    placement = 'auto',
+}: ImageChipCellProps) => (
     <div className="cn-7 fs-14 lh-20 flexbox">
-        <Tippy content={imagePath} className="default-tt" placement="auto" arrow={false}>
+        <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`}

src/Shared/Components/ImageChipCell/types.ts

@@ -13,13 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { SyntheticEvent } from 'react'
+import Tippy from '@tippyjs/react'
+import { ComponentProps, SyntheticEvent } from 'react'
 import { RegistryType } from '../../types'
 
 export interface ImageChipCellProps {
-    handleClick: (e: SyntheticEvent) => void
     imagePath: string
-    isExpanded: boolean
-    registryType: RegistryType
+    isExpanded?: boolean
+    handleClick?: (e: SyntheticEvent) => void
+    registryType?: RegistryType
+    placement?: ComponentProps<typeof Tippy>['placement']
 }