feat: Replace Instances of svg used as background-image with Icon component

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx

@@ -31,13 +31,14 @@
     stringComparatorBySortOrder,
     handleRelativeDateSorting,
     Tooltip,
+    DeploymentStatus,
+    StatusType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg'
 import { ReactComponent as ICActivity } from '@Icons/ic-activity.svg'
 import { ReactComponent as ICArrowLineDown } from '@Icons/ic-arrow-line-down.svg'
 import { ReactComponent as ICMoreOption } from '@Icons/ic-more-option.svg'
-import { StatusConstants } from '@Components/app/list-new/Constants'
 
 import {
     EnvironmentOverviewTableHeaderFixedKeys,
@@ -222,12 +223,7 @@
                         value="CHECKED"
                         rootClassName={`mb-0 ml-2 ${!isPartialChecked ? 'dc__visible-hover--child' : ''}`}
                     />
-                    {!isVirtualEnv && (
-                        <AppStatus
-                            appStatus={deployedAt ? status : StatusConstants.NOT_DEPLOYED.noSpaceLower}
-                            hideStatusMessage
-                        />
-                    )}
+                    {!isVirtualEnv && <AppStatus status={deployedAt ? status : StatusType.NOT_DEPLOYED} hideMessage />}
                     <div className="flexbox dc__align-items-center dc__content-space dc__gap-8">
                         <Tooltip content={name}>
                             <Link className="py-2 dc__truncate dc__no-decor" to={redirectLink}>
@@ -240,9 +236,8 @@
                 <div
                     className={`environment-overview-table__variable-cell px-16 py-8 cn-9 fs-13 lh-20 ${isLastDeployedExpandedRowClassName}`}
                 >
-                    <AppStatus
-                        appStatus={deployedAt ? deploymentStatus : StatusConstants.NOT_DEPLOYED.noSpaceLower}
-                        isDeploymentStatus
+                    <DeploymentStatus
+                        status={deployedAt ? deploymentStatus : StatusType.NOT_DEPLOYED}
                         isVirtualEnv={isVirtualEnv}
                     />
                     {lastDeployedImage && (

src/Pages/Shared/LinkedCIDetailsModal/LinkedCIAppList.tsx

@@ -15,10 +15,9 @@
  */
 
 import { Link } from 'react-router-dom'
-import { SortableTableHeaderCell, AppStatus, GenericFilterEmptyState } from '@devtron-labs/devtron-fe-common-lib'
+import { SortableTableHeaderCell, GenericFilterEmptyState, DeploymentStatus } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { LinkedCIApp, LinkedCIAppListProps } from './types'
-import { StatusConstants } from '../../../components/app/list-new/Constants'
 import { SortableKeys, appListLoading } from './constants'
 import { getLinkedCIAppUrl } from './utils'
 
@@ -34,14 +33,7 @@
                 <>
                     <span className="dc__truncate dc__w-fit-content">{environmentName}</span>
                     <span className="dc__first-letter-capitalize">{triggerMode}</span>
-                    <AppStatus
-                        appStatus={
-                            deploymentStatus === StatusConstants.NOT_DEPLOYED.titleCase
-                                ? StatusConstants.NOT_DEPLOYED.noSpaceLower
-                                : deploymentStatus
-                        }
-                        isDeploymentStatus
-                    />
+                    <DeploymentStatus status={deploymentStatus} />
                 </>
             ) : (
                 <span className="cn-7">No deployment pipeline</span>

src/Pages/Shared/LinkedCIDetailsModal/types.ts

@@ -19,8 +19,8 @@
     UseUrlFiltersReturnType,
     WorkflowType,
     TriggerType,
+    StatusType,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { StatusConstants } from '../../../components/app/list-new/Constants'
 import { DEPLOYMENT_STATUS } from '../../../config'
 import { SortableKeys } from './constants'
 
@@ -32,9 +32,7 @@
 export interface LinkedCIAppDto {
     appId: number
     appName: string
-    deploymentStatus:
-        | (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS]
-        | typeof StatusConstants.NOT_DEPLOYED.titleCase
+    deploymentStatus: (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS] | StatusType.NOT_DEPLOYED
     environmentId: number
     environmentName: string
     triggerMode: (typeof TriggerType)[keyof typeof TriggerType]

src/components/CIPipelineN/CustomImageTags.tsx

@@ -16,7 +16,14 @@
 
 import { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { OptionType, SelectPicker, Textarea, Toggle } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    OptionType,
+    RegistryIcon,
+    RegistryType,
+    SelectPicker,
+    Textarea,
+    Toggle,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { CustomImageTagsType } from './CustomImageTag.type'
 import { ValidationRules } from '../ciPipeline/validationRules'
 import { CustomErrorMessage, REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
@@ -145,8 +152,8 @@
                 {!isCustomTagError && (
                     <div className="image-tag-preview pt-6 pb-6 cn-7 flexbox">
                         Tag Preview:
-                        <div className="ml-4 bg__secondary mono flexbox dc__w-fit-content pl-4 pr-4 br-4">
-                            <div className="dc__registry-icon docker mr-5" />
+                        <div className="ml-4 bg__secondary mono flexbox dc__w-fit-content pl-4 pr-4 br-4 dc__gap-4">
+                            <RegistryIcon registryType={RegistryType.DOCKER} />
                             {formData.customTag?.tagPattern?.replace(
                                 '{x}',
                                 formData.customTag?.counterX?.toString() ?? '0',

src/components/CIPipelineN/EnvironmentList.tsx

@@ -17,8 +17,8 @@
 import {
     ComponentSizeType,
     Environment,
+    Icon,
     SelectPicker,
-    SelectPickerOptionType,
     SelectPickerVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { createClusterEnvGroup } from '../common'
@@ -76,7 +76,7 @@
             ...selectedEnv,
             label: selectedEnv?.name,
             value: selectedEnv?.id, // assuming the whole object is set as value
-            startIcon: !isBuildStage ? <div className="dc__environment-icon" /> : null,
+            startIcon: !isBuildStage ? <Icon name='ic-env' size={18} color={null} /> : null,
         }
 
         return _selectedEnv

src/components/Jobs/ExpandedRow/ExpandedRow.tsx

@@ -45,7 +45,7 @@
                     <div className="app-list__cell--icon" />
                     <div className="app-list__cell app-list__cell--env cb-5">{ciPipeline.ciPipelineName}</div>
                     <div className="app-list__cell app-list__cell--app_status">
-                        <AppStatus appStatus={ciPipeline.status} isJobView />
+                        <AppStatus status={ciPipeline.status} isJobView />
                     </div>
                     <div className="app-list__cell app-list__cell--time">
                         <p className="dc__truncate-text m-0">

src/components/Jobs/JobList/JobListView.tsx

@@ -105,7 +105,7 @@
                                 </p>
                             </div>
                             <div className="app-list__cell">
-                                <AppStatus appStatus={job.defaultPipeline.status} isJobView />
+                                <AppStatus status={job.defaultPipeline.status} isJobView />
                             </div>
                             <div className="app-list__cell">
                                 <p className="dc__truncate-text m-0">

src/components/app/Overview/EnvironmentList.tsx

@@ -32,6 +32,7 @@
     ImageChipCell,
     RegistryType,
     AppEnvironment,
+    StatusType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link, useHistory } from 'react-router-dom'
 import { ReactComponent as ActivityIcon } from '../../../assets/icons/ic-activity.svg'
@@ -44,7 +45,6 @@
 import { getAppOtherEnvironment } from '@Services/service'
 import { getModuleInfo } from '../../v2/devtronStackManager/DevtronStackManager.service'
 import { ModuleStatus } from '../../v2/devtronStackManager/DevtronStackManager.type'
-import { StatusConstants } from '../list-new/Constants'
 import { AppMetaInfo, AppOverviewProps } from '../types'
 import { EnvironmentListSortableKeys, loadingEnvironmentList } from './constants'
 import { renderCIListHeader } from '../details/cdDetails/utils'
@@ -204,13 +204,11 @@
                                                 {envIcon(_env.isVirtualEnvironment)}
                                                 {isArgoInstalled && (
                                                     <AppStatus
-                                                        appStatus={
-                                                            _env.lastDeployed
-                                                                ? _env.appStatus
-                                                                : StatusConstants.NOT_DEPLOYED.noSpaceLower
+                                                        status={
+                                                            _env.lastDeployed ? _env.appStatus : StatusType.NOT_DEPLOYED
                                                         }
                                                         isVirtualEnv={_env.isVirtualEnvironment}
-                                                        hideStatusMessage
+                                                        hideMessage
                                                     />
                                                 )}
                                                 <Link
@@ -227,10 +225,7 @@
                                                         registryType={RegistryType.DOCKER}
                                                     />
                                                 ) : (
-                                                    <span className="fs-13 cn-6 flex left dc__gap-6">
-                                                        <span className="dc__app-summary__icon icon-dim-16 not-deployed not-deployed--node" />
-                                                        <span>Not Deployed</span>
-                                                    </span>
+                                                    <AppStatus status="Not Deployed" />
                                                 )}
                                                 <CommitChipCell
                                                     handleClick={openCommitInfoModal}

src/components/app/Overview/Overview.tsx

@@ -31,6 +31,8 @@ import {
     EditableTextArea,
     ToastManager,
     ToastVariantType,
+    AppStatus,
+    StatusType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import ReactGA from 'react-ga4'
 import { getGitProviderIcon, handleUTCTime, importComponentFromFELibrary } from '../../common'
@@ -372,31 +374,6 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
         </div>
     )
 
-    const getStatusIcon = (status: string): JSX.Element => {
-        switch (status) {
-            case 'Succeeded':
-                return <SucceededIcon className="dc__app-summary__icon icon-dim-16 mr-6" />
-            case 'Failed':
-            case 'Error':
-                return <FailedIcon className="dc__app-summary__icon icon-dim-16 mr-6" />
-            case 'InProgress':
-                return <InProgressIcon className="dc__app-summary__icon icon-dim-16 mr-6" />
-            case 'Starting':
-                return <div className="dc__app-summary__icon icon-dim-16 mr-6 progressing" />
-            case 'Running':
-                return <div className="dc__app-summary__icon icon-dim-16 mr-6 progressing" />
-            case 'CANCELLED':
-                return <div className="dc__app-summary__icon icon-dim-16 mr-6 cancelled" />
-            default:
-                return (
-                    <>
-                        <CrossIcon className="dc__app-summary__icon icon-dim-16 mr-6" />
-                        Yet to run
-                    </>
-                )
-        }
-    }
-
     const renderWorkflowComponent = () => {
         if (!Array.isArray(jobPipelines) || !jobPipelines.length) {
             return (
@@ -432,14 +409,9 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
                         <div className="flex">
                             <div
                                 data-testid={`${jobPipeline.status || 'notdeployed'}-job-status`}
-                                className="mr-16 w-150 h-20 m-tb-8 fs-13 cn-9 flex dc__content-start"
+                                className="mr-16 w-150 h-20 m-tb-8"
                             >
-                                {getStatusIcon(jobPipeline.status)}
-                                {jobPipeline.status === 'CANCELLED' ? (
-                                    <div>Aborted</div>
-                                ) : (
-                                    <div>{jobPipeline.status}</div>
-                                )}
+                                <AppStatus status={jobPipeline.status || StatusType.NOT_DEPLOYED} isJobView />
                             </div>
                             <div
                                 data-testid={`${jobPipeline.environmentName}-${index}`}

src/components/app/details/appDetails/AppStatusCard.tsx

@@ -17,7 +17,7 @@
 import React from 'react'
 import Tippy from '@tippyjs/react'
 import ReactGA from 'react-ga4'
-import { AppType, DeploymentAppTypes } from '@devtron-labs/devtron-fe-common-lib'
+import { AppStatus, AppType, DeploymentAppTypes } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
 import { AppStatusCardType } from './appDetails.type'
 import LoadingCard from './LoadingCard'
@@ -91,11 +91,7 @@ const AppStatusCard = ({ appDetails, status, cardLoading, setDetailed, message }
                         </div>
                     </div>
                 </div>
-                <div className="flex br-4">
-                    <figure
-                        className={`dc__app-summary__icon dc__zi-0 ${status.toLowerCase().replace(/ /g, '-')} h-24 w-24 dc__bs-contain m-auto`}
-                    />
-                </div>
+                <AppStatus status={status} iconSize={24} hideMessage showAnimatedIcon hideIconTooltip />
             </div>
             <div className="app-details-info-card__bottom-container">{renderBottomContainer()}</div>
         </div>

src/components/app/details/appDetails/DeployedCommitCard.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { getCITriggerInfo, showError } from '@devtron-labs/devtron-fe-common-lib'
+import { getCITriggerInfo, Icon, showError } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
 import { ReactComponent as CommitIcon } from '../../../../assets/icons/ic-code-commit.svg'
 import { DeployedCommitCardType } from './appDetails.type'
@@ -88,7 +88,7 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
                         <div className="dc__ellipsis-right cn-7 ml-2 fw-4 fs-12 mono">{commitId}</div>
                     </div>
                 </div>
-                <div className="dc__git-logo" />
+                <Icon name="ic-git" size={24} color={null} />
                 {/* @TODO: This should be dynamic, dependent on the source */}
                 {/* <GitHub className="github-icon" /> */}
             </div>

src/components/app/details/appDetails/appDetails.scss

@@ -916,13 +916,6 @@ table.pod__table td:last-child {
                     font-size: 12px;
                 }
 
-                .dc__app-summary__icon {
-                    width: 32px;
-                    height: 32px;
-                    background-size: cover;
-                    position: unset;
-                }
-
                 .deployment-summary {
                     height: 53px;
                     background: var(--bg-tertiary);
@@ -1772,13 +1765,6 @@ table.resource-tree {
 
 .source-info-container,
 .app-details-info-card {
-    .dc__app-summary__icon {
-        &.healthy {
-            background-size: contain, contain;
-            background: url('../../../../assets/icons/appstatus/ic-heart-green.svg'), transparent;
-        }
-    }
-
     .mw-340 {
         max-width: 340px !important;
     }

src/components/app/details/cIDetails/ciDetails.scss

@@ -156,10 +156,6 @@
         padding: 12px 0;
         column-gap: 12px;
     }
-
-    .app-status__icon {
-        position: unset;
-    }
 }
 
 .p-20 {

src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx

@@ -30,6 +30,7 @@ import {
     getUrlWithSearchParams,
     Tooltip,
     MODES,
+    Icon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import moment from 'moment'
 import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
@@ -156,9 +157,7 @@ export const CiWebhookModal = ({
                                 onClick={() => getCIWebhookPayloadRes(ciPipelineMaterialId, webhookPayload)}
                             >
                                 <div className="flex left top dc__gap-8">
-                                    <div
-                                        className={`dc__app-summary__icon dc__no-shrink icon-dim-20  ${isPassed ? 'succeeded' : 'not-ready'}`}
-                                    />
+                                    <Icon name={isPassed ? 'ic-success' : 'ic-error'} size={20} color={null} />
                                     <div>
                                         <span className={`lh-20 ${isActive ? 'cb-5 fw-6' : 'cn-9'}`}>
                                             {moment(webhookPayload.eventTime).format(Moment12HourFormat)}