chore: replacement in app configuration

shivani170 · shivani170 · commit 57507dce4183 · 2025-04-21T19:41:19.000+05:30
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx
@@ -26,7 +26,7 @@ import {
     ComponentSizeType,
     EntityTypes,
     GVKType,
-    InfoColourBar,
+    InfoBlock,
     OptionType,
     ResourceListPayloadType,
     SelectPicker,
@@ -44,7 +44,6 @@ import {
 
 import { ReactComponent as Clone } from '../../../../../../assets/icons/ic-copy.svg'
 import { ReactComponent as Delete } from '../../../../../../assets/icons/ic-delete-interactive.svg'
-import { ReactComponent as InfoIcon } from '../../../../../../assets/icons/info-filled.svg'
 import {
     convertToOptionsList,
     importComponentFromFELibrary,
@@ -497,12 +496,7 @@ const K8sListItemCard = ({
                         size={ComponentSizeType.large}
                     />
                     {K8S_PERMISSION_INFO_MESSAGE[k8sPermission?.kind?.label] && (
-                        <InfoColourBar
-                            message={K8S_PERMISSION_INFO_MESSAGE[k8sPermission.kind.label]}
-                            classname="info_bar mb-12"
-                            Icon={InfoIcon}
-                            iconClass="icon-dim-20"
-                        />
+                        <InfoBlock description={K8S_PERMISSION_INFO_MESSAGE[k8sPermission.kind.label]} />
                     )}
                     <div className="w-300">
                         <SelectPicker
diff --git a/src/Pages/Shared/LinkedCIDetailsModal/LinkedCIDetailsModal.tsx b/src/Pages/Shared/LinkedCIDetailsModal/LinkedCIDetailsModal.tsx
@@ -24,7 +24,7 @@ import {
     ErrorScreenNotAuthorized,
     GenericEmptyState,
     getIsRequestAborted,
-    InfoColourBar,
+    InfoBlock,
     OptionType,
     Pagination,
     Reload,
@@ -36,7 +36,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
-import { ReactComponent as Info } from '../../../assets/icons/ic-info-filled.svg'
 import { preventBodyScroll } from '../../../components/common'
 import { API_STATUS_CODES, SELECT_ALL_VALUE } from '../../../config'
 import { ALL_ENVIRONMENT_OPTION, SortableKeys } from './constants'
@@ -173,11 +172,7 @@ const LinkedCIDetailsModal = ({ handleClose, workflows }: LinkedCIDetailModalPro
                             <Close className="icon-dim-24" />
                         </button>
                     </div>
-                    <InfoColourBar
-                        message={getLinkedCITippyContent(linkedWorkflowCount)}
-                        classname="bcb-1 dc__border-bottom--b2"
-                        Icon={Info}
-                    />
+                    <InfoBlock description={getLinkedCITippyContent(linkedWorkflowCount)} />
                 </div>
                 <div className="flexbox-col flex-grow-1">
                     <div className="flex flex-justify-start dc__gap-8 pl-20 pr-20 pt-8 pb-8 lh-20 dc__zi-5">
diff --git a/src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusListDrawer.tsx b/src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusListDrawer.tsx
@@ -14,20 +14,19 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import {
     Drawer,
     GenericEmptyState,
     ImageType,
-    InfoColourBar,
     Progressing,
     usePrompt,
     DEFAULT_ROUTE_PROMPT_MESSAGE,
+    InfoBlock,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Prompt } from 'react-router-dom'
 import { HibernateStatusRow } from './HibernateStatusRow'
 import { ReactComponent as Close } from '../../../../assets/icons/ic-cross.svg'
-import { ReactComponent as Error } from '../../../../assets/icons/ic-warning.svg'
 import { ReactComponent as MechanicalOperation } from '../../../../assets/img/ic-mechanical-operation.svg'
 
 export default function HibernateStatusListDrawer({
@@ -78,13 +77,7 @@ export default function HibernateStatusListDrawer({
                         SvgImage={MechanicalOperation}
                         imageType={ImageType.Large}
                     >
-                        <InfoColourBar
-                            message={DEFAULT_ROUTE_PROMPT_MESSAGE}
-                            classname="warn cn-9 lh-2 w-100 dc__align-left"
-                            Icon={Error}
-                            iconClass="warning-icon icon-dim-20-imp"
-                            iconSize={20}
-                        />
+                        <InfoBlock variant="warning" description={DEFAULT_ROUTE_PROMPT_MESSAGE} />
                     </GenericEmptyState>
 
                     <Prompt when message={DEFAULT_ROUTE_PROMPT_MESSAGE} />
diff --git a/src/components/ApplicationGroup/Details/EnvironmentOverview/RestartStatusListDrawer.tsx b/src/components/ApplicationGroup/Details/EnvironmentOverview/RestartStatusListDrawer.tsx
@@ -18,15 +18,15 @@ import { useState } from 'react'
 
 import {
     ACTION_STATE,
+    DEFAULT_ROUTE_PROMPT_MESSAGE,
     DEPLOYMENT_WINDOW_TYPE,
     GenericEmptyState,
-    InfoColourBar,
+    InfoBlock,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Success } from '../../../../assets/icons/appstatus/healthy.svg'
 import { ReactComponent as Failed } from '../../../../assets/icons/ic-error.svg'
 import { ReactComponent as ArrowRight } from '../../../../assets/icons/ic-expand.svg'
-import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
 import { ReactComponent as MechanicalIcon } from '../../../../assets/img/ic-mechanical-operation.svg'
 import { importComponentFromFELibrary } from '../../../common'
 import { BulkRotatePodsMap, ResourcesMetaDataMap, RestartStatusListDrawerProps } from '../../AppGroup.types'
@@ -234,13 +234,7 @@ export const RestartStatusListDrawer = ({
                     subTitle={APP_DETAILS_TEXT.APP_GROUP_RESTART_WORKLOAD_SUBTITLE}
                     SvgImage={MechanicalIcon}
                 >
-                    <InfoColourBar
-                        message={APP_DETAILS_TEXT.APP_GROUP_EMPTY_WORKLOAD_INFO_BAR}
-                        classname="warn cn-9 lh-2 w-100"
-                        Icon={Warn}
-                        iconClass="warning-icon h-100-imp"
-                        iconSize={24}
-                    />
+                    <InfoBlock variant="warning" description={DEFAULT_ROUTE_PROMPT_MESSAGE} />
                 </GenericEmptyState>
             </div>
         )
diff --git a/src/components/ApplicationGroup/Details/EnvironmentOverview/RestartWorkloadModal.tsx b/src/components/ApplicationGroup/Details/EnvironmentOverview/RestartWorkloadModal.tsx
@@ -26,7 +26,7 @@ import {
     Drawer,
     ErrorScreenManager,
     GenericEmptyState,
-    InfoColourBar,
+    InfoBlock,
     MODAL_TYPE,
     stopPropagation,
     usePrompt,
@@ -37,8 +37,6 @@ import { ReactComponent as Retry } from '../../../../assets/icons/ic-arrow-clock
 import { ReactComponent as DropdownIcon } from '../../../../assets/icons/ic-arrow-left.svg'
 import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
 import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg'
-import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
-import { ReactComponent as InfoIcon } from '../../../../assets/icons/info-filled.svg'
 import { ReactComponent as MechanicalIcon } from '../../../../assets/img/ic-mechanical-operation.svg'
 import { importComponentFromFELibrary } from '../../../common'
 import {
@@ -450,23 +448,16 @@ export const RestartWorkloadModal = ({
                     subTitle={APP_DETAILS_TEXT.APP_GROUP_RESTART_WORKLOAD_SUBTITLE}
                     SvgImage={MechanicalIcon}
                 >
-                    <InfoColourBar
-                        message={APP_DETAILS_TEXT.APP_GROUP_EMPTY_WORKLOAD_INFO_BAR}
-                        classname="warn cn-9 lh-2 w-100"
-                        Icon={Warn}
-                        iconClass="warning-icon h-100-imp"
-                        iconSize={20}
-                    />
+                    <InfoBlock variant="warning" description={DEFAULT_ROUTE_PROMPT_MESSAGE} />
                 </GenericEmptyState>
             )
         }
 
         return (
             <div className="flexbox-col dc__overflow-auto">
-                <InfoColourBar
-                    message={APP_DETAILS_TEXT.APP_GROUP_INFO_TEXT}
-                    classname="info_bar dc__no-border-radius dc__no-top-border"
-                    Icon={InfoIcon}
+                <InfoBlock
+                    borderConfig={{ top: false, left: false, right: false }}
+                    description={APP_DETAILS_TEXT.APP_GROUP_INFO_TEXT}
                 />
                 {renderWorkloadTableHeader()}
                 {renderRestartWorkloadModalListItems()}
diff --git a/src/components/ApplicationGroup/Details/EnvironmentOverview/constants.ts b/src/components/ApplicationGroup/Details/EnvironmentOverview/constants.ts
@@ -21,7 +21,6 @@ export enum APP_DETAILS_TEXT {
     ALL = 'All',
     APP_NAME = 'app-name',
     APP_GROUP_RESTART_WORKLOAD_SUBTITLE = 'It might take some time depending upon the number of applications',
-    APP_GROUP_EMPTY_WORKLOAD_INFO_BAR = "Please don't wander off! Reloading or going back might disrupt the ongoing operation.",
     APP_GROUP_INFO_TEXT = 'Pods for selected workloads will be restarted. Configured deployment strategies will be used to restart workloads.',
     APPLICATIONS = 'APPLICATIONS',
     EXPAND_ALL = 'Expand all',
diff --git a/src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx b/src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx
@@ -22,11 +22,10 @@ import {
     ButtonVariantType,
     CustomInput,
     Drawer,
-    InfoColourBar,
+    InfoBlock,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Close } from '../../../../assets/icons/ic-cross.svg'
-import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
 import SourceUpdateResponseModal from './SourceUpdateResponseModal'
 import { BulkSourceChangeProps } from './types'
 
@@ -106,11 +105,11 @@ const BulkSourceChange = ({
     )
 
     const renderInfoBar = (): JSX.Element => (
-        <InfoColourBar
-            message="Branch will be changed only for build pipelines with source type as ‘Branch Fixed’ or ‘Branch Regex’."
-            classname="warn dc__no-border-radius dc__no-top-border dc__no-left-border dc__no-right-border"
-            Icon={Warn}
-            iconClass="warning-icon"
+        <InfoBlock
+            variant="warning"
+            borderRadiusConfig={{ top: false }}
+            borderConfig={{ top: false, left: false, right: false }}
+            description="Branch will be changed only for build pipelines with source type as ‘Branch Fixed’ or ‘Branch Regex’."
         />
     )
 
diff --git a/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx b/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
@@ -31,6 +31,7 @@ import {
     Button,
     ButtonVariantType,
     ButtonStyleType,
+    InfoBlock,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useParams } from 'react-router-dom'
 import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
@@ -191,12 +192,7 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
                     </button>
                 </div>
                 <div className="flexbox-col pt-16 pr-20 pb-16 pl-20 dc__overflow-auto flex-grow-1">
-                    <InfoColourBar
-                        message={<RenderInfoMessage />}
-                        classname="info_bar mb-16"
-                        Icon={InfoIcon}
-                        iconClass="icon-dim-20"
-                    />
+                    <InfoBlock description={<RenderInfoMessage />} />
                     <div className="cursor cb-5 fw-6 fs-13 flexbox mr-20 mb-12" onClick={addNewTaint}>
                         <Add className="icon-dim-20 fcb-5" /> {EDIT_TAINTS_MODAL_MESSAGING.addTaint}
                     </div>
@@ -221,9 +217,7 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
                                     value={taintDetails.value}
                                     onChange={handleInputChange}
                                     placeholder="Value"
-                                    error={
-                                        errorObj && !_errorObj['value'].isValid ? _errorObj['value'].message : null
-                                    }
+                                    error={errorObj && !_errorObj['value'].isValid ? _errorObj['value'].message : null}
                                     fullWidth
                                 />
                                 <div className="w-70">
diff --git a/src/components/app/details/triggerView/BranchRegexModal.tsx b/src/components/app/details/triggerView/BranchRegexModal.tsx
@@ -20,15 +20,14 @@ import {
     ButtonVariantType,
     ComponentSizeType,
     CustomInput,
-    InfoColourBar,
+    InfoBlock,
     SourceTypeMap,
     stopPropagation,
     VisibleModal2,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as LeftIcon } from '@Icons/ic-arrow-backward.svg'
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
-import { ReactComponent as Info } from '@Icons/info-filled.svg'
 import { getGitProviderIcon } from '@Components/common'
 
 import { REQUIRED_FIELD_MSG } from '../../../../config/constantMessaging'
@@ -88,11 +87,7 @@ const BranchRegexModal = ({
 
     const renderRegexInfo = () => (
         <div className="dc__border-bottom--b2">
-            <InfoColourBar
-                classname="info_bar dc__no-border-radius dc__no-border-imp"
-                message="Commit will be fetched from the provided branch. This can be changed later."
-                Icon={Info}
-            />
+            <InfoBlock description="Commit will be fetched from the provided branch. This can be changed later." />
         </div>
     )
 
diff --git a/src/components/app/details/triggerView/workflow/Workflow.tsx b/src/components/app/details/triggerView/workflow/Workflow.tsx
@@ -33,7 +33,6 @@ import { TriggerPrePostCDNode } from './nodes/triggerPrePostCDNode'
 import { getCIPipelineURL, importComponentFromFELibrary, RectangularEdge as Edge } from '../../../../common'
 import { WorkflowProps, TriggerViewContextType } from '../types'
 import { WebhookNode } from '../../../../workflowEditor/nodes/WebhookNode'
-import DeprecatedPipelineWarning from '../../../../workflowEditor/DeprecatedPipelineWarning'
 import { GIT_BRANCH_NOT_CONFIGURED } from '../../../../../config'
 import { TriggerViewContext } from '../config'
 
@@ -402,7 +401,6 @@ export class Workflow extends Component<WorkflowProps> {
                         </>
                     )}
                 </div>
-                {isExternalCiWorkflow && <DeprecatedPipelineWarning />}
                 <div
                     className={`workflow__body bg__secondary dc__overflow-auto dc__border-n1 br-4 ${this.props.isSelected ? 'eb-2' : ''}`}
                 >
diff --git a/src/components/cdPipeline/BuildCD.tsx b/src/components/cdPipeline/BuildCD.tsx
@@ -253,16 +253,14 @@ export default function BuildCD({
 
     const renderWebhookInfo = () => {
         return (
-            <InfoColourBar
-                message={
+            <InfoBlock
+                variant="help"
+                description={
                     <div>
                         <span className="fw-6">Connecting to external CI service: </span>A webhook url and sample JSON
                         will be generated after the pipeline is created.
                     </div>
                 }
-                classname="bw-1 bcv-1 ev-2 bcv-1 fs-12 mt-20"
-                Icon={Help}
-                iconClass="fcv-5 h-20"
             />
         )
     }
diff --git a/src/components/charts/list/ChartListPopUp.tsx b/src/components/charts/list/ChartListPopUp.tsx
@@ -25,6 +25,7 @@ import {
     SearchBar,
     ToastManager,
     ToastVariantType,
+    InfoBlock,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { NavLink } from 'react-router-dom'
@@ -179,12 +180,7 @@ const ChartListPopUp = ({
                         )
                     )
                 })}
-                <InfoColourBar
-                    message={renderInfoText()}
-                    classname="question-bar m-16"
-                    Icon={Help}
-                    iconClass="icon-dim-20 fcv-5"
-                />
+                <InfoBlock variant="help" description={renderInfoText()} />
             </div>
         )
     }
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
@@ -15,7 +15,16 @@
  */
 
 import React, { useEffect, useState } from 'react'
-import { RadioGroupItem, VisibleModal, RadioGroup, InfoColourBar, SelectPicker, ComponentSizeType, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    RadioGroupItem,
+    VisibleModal,
+    RadioGroup,
+    InfoColourBar,
+    SelectPicker,
+    ComponentSizeType,
+    CustomInput,
+    InfoBlock,
+} from '@devtron-labs/devtron-fe-common-lib'
 import Select from 'react-select'
 import { SingleDatePicker } from 'react-dates'
 import 'react-dates/initialize'
@@ -24,7 +33,6 @@ import moment from 'moment'
 import CustomizableCalendarDay from 'react-dates/lib/components/CustomizableCalendarDay'
 import { Option } from '../../../../../common/ReactSelect.utils'
 import { ReactComponent as Close } from '../../../../../../../assets/icons/ic-close.svg'
-import { ReactComponent as Warn } from '../../../../../../../assets/icons/ic-warning.svg'
 import { ReactComponent as CalendarIcon } from '../../../../../../../assets/icons/ic-calendar.svg'
 import { ReactComponent as ClockIcon } from '../../../../../../../assets/icons/ic-clock.svg'
 import { ReactComponent as Info } from '../../../../../../../assets/icons/ic-info-outline-grey.svg'
@@ -191,11 +199,9 @@ export const InputForSelectedOption = ({
             return (
                 <div className="flexbox-col">
                     <div className="fs-13 fw-4 cn-9 mb-16">All available logs will be shown.</div>
-                    <InfoColourBar
-                        classname="warn"
-                        Icon={Warn}
-                        message="Note: It might take longer or result in browser issues for extensive logs."
-                        iconClass="warning-icon"
+                    <InfoBlock
+                        variant="warning"
+                        description="Note: It might take longer or result in browser issues for extensive logs."
                     />
                 </div>
             )
diff --git a/src/components/v2/appDetails/sourceInfo/rotatePods/RotatePodsModal.component.tsx b/src/components/v2/appDetails/sourceInfo/rotatePods/RotatePodsModal.component.tsx
diff --git a/src/components/v2/values/chartValuesDiff/ProjectUpdateModal.tsx b/src/components/v2/values/chartValuesDiff/ProjectUpdateModal.tsx
diff --git a/src/components/workflowEditor/DeprecatedPipelineWarning.tsx b/src/components/workflowEditor/DeprecatedPipelineWarning.tsx
diff --git a/src/components/workflowEditor/Workflow.tsx b/src/components/workflowEditor/Workflow.tsx
diff --git a/src/components/workflowEditor/workflowEditor.tsx b/src/components/workflowEditor/workflowEditor.tsx
