chore: manifest info block

Author: shivani170

.eslintignore

@@ -384,7 +384,6 @@ src/components/v2/values/chartValuesDiff/ProjectUpdateModal.tsx
 src/components/v2/values/common/chartValues.api.ts
 src/components/workflowEditor/CDSuccessModal.tsx
 src/components/workflowEditor/CreateWorkflow.tsx
-src/components/workflowEditor/DeprecatedPipelineWarning.tsx
 src/components/workflowEditor/DeprecatedWarningModal.tsx
 src/components/workflowEditor/EmptyWorkflow.tsx
 src/components/workflowEditor/NoGitOpsConfiguredWarning.tsx

src/Pages/Shared/ConfigMapSecret/helpers.tsx

@@ -16,7 +16,13 @@
 
 import { Link } from 'react-router-dom'
 
-import { CMSecretComponentType, CMSecretExternalType, Icon, InfoColourBar } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    CMSecretComponentType,
+    CMSecretExternalType,
+    Icon,
+    InfoBlock,
+    InfoColourBar,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as InfoIcon } from '@Icons/info-filled.svg'
 import { DOCUMENTATION } from '@Config/constants'
@@ -26,9 +32,8 @@ import { EXTERNAL_INFO_TEXT } from './constants'
 
 export const renderESOInfo = (isESO: boolean) =>
     isESO ? (
-        <InfoColourBar
-            classname="info_bar"
-            message={
+        <InfoBlock
+            description={
                 <p className="m-0 cn-9 fs-13 fw-4 lh-20">
                     <Link
                         to={`${URLS.CHARTS_DISCOVER}?appStoreName=external-secret`}
@@ -48,8 +53,6 @@ export const renderESOInfo = (isESO: boolean) =>
                     </a>
                 </p>
             }
-            Icon={InfoIcon}
-            iconSize={20}
         />
     ) : null
 

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

@@ -22,7 +22,6 @@ import {
     showError,
     Progressing,
     ConditionalWrap,
-    InfoColourBar,
     noop,
     MaterialInfo,
     UserApprovalMetadataType,
@@ -88,6 +87,7 @@ import {
     DEPLOYMENT_CONFIG_DIFF_SORT_KEY,
     SortingOrder,
     SegmentedControlProps,
+    InfoBlock,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -104,7 +104,6 @@ import close from '../../../../assets/icons/ic-close.svg'
 import { ReactComponent as Check } from '../../../../assets/icons/ic-check-circle.svg'
 import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
 import { ReactComponent as BackIcon } from '../../../../assets/icons/ic-arrow-backward.svg'
-import { ReactComponent as InfoIcon } from '../../../../assets/icons/info-filled.svg'
 import { ReactComponent as InfoOutline } from '../../../../assets/icons/ic-info-outline.svg'
 import { ReactComponent as SearchIcon } from '../../../../assets/icons/ic-search.svg'
 import { ReactComponent as RefreshIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
@@ -1839,11 +1838,10 @@ const CDMaterial = ({
             {isApprovalConfigured &&
                 ApprovedImagesMessage &&
                 (state.isRollbackTrigger || material.length - Number(isConsumedImageAvailable) > 0) && (
-                    <InfoColourBar
-                        message={<ApprovedImagesMessage viewAllImages={viewAllImages} />}
-                        classname="info_bar dc__no-border-radius dc__no-top-border"
-                        Icon={InfoIcon}
-                        iconClass="icon-dim-20"
+                    <InfoBlock
+                        borderConfig={{ top: false }}
+                        borderRadiusConfig={{ top: false, bottom: false, left: false, right: false }}
+                        description={<ApprovedImagesMessage viewAllImages={viewAllImages} />}
                     />
                 )}
             {!isFromBulkCD &&

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx

@@ -30,7 +30,7 @@ import {
     DeploymentAppTypes,
     FormProps,
     getComponentSpecificThemeClass,
-    InfoColourBar,
+    InfoBlock,
     isCodeMirrorEnabled,
     logExceptionToSentry,
     noop,
@@ -45,8 +45,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
-import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
-import { ReactComponent as ICInfoFilled } from '@Icons/ic-info-filled.svg'
 import { DEFAULT_CLUSTER_ID } from '@Components/cluster/cluster.type'
 import { importComponentFromFELibrary } from '@Components/common'
 
@@ -78,7 +76,7 @@ import {
     updateManifestResourceHelmApps,
 } from '../nodeDetail.api'
 import { NodeDetailTab } from '../nodeDetail.type'
-import { getDecodedEncodedSecretManifestData, getTrimmedManifestData } from '../nodeDetail.util'
+import { getDecodedEncodedSecretManifestData, getTrimmedManifestData, manifestBorderConfig } from '../nodeDetail.util'
 
 const renderOutOfSyncWarning = importComponentFromFELibrary('renderOutOfSyncWarning', null, 'function')
 const getManifestGUISchema = importComponentFromFELibrary('getManifestGUISchema', null, 'function')
@@ -660,15 +658,7 @@ const ManifestComponent = ({
             )
         }
 
-        return (
-            <InfoColourBar
-                message={message}
-                classname="w-100 m-0 fs-12 fw-4 lh-16 cn-9 py-8 px-16 bcb-1 dc__border-bottom dc__no-border-radius dc__no-top-border dc__no-left-border dc__no-right-border dc__word-break"
-                Icon={ICInfoFilled}
-                iconClass="icon-dim-16"
-                linkClass="dc__truncate--clamp-6"
-            />
-        )
+        return <InfoBlock description={message} {...manifestBorderConfig} />
     }
 
     const renderErrorBar = (isCodeEditorView: boolean = false) => {
@@ -680,15 +670,7 @@ const ManifestComponent = ({
             return <CodeEditor.ErrorBar text={errorText} />
         }
 
-        return (
-            <InfoColourBar
-                message={errorText}
-                classname="w-100 m-0 fs-12 fw-4 lh-16 py-8 px-16 bco-1 co-5 dc__border-bottom dc__no-border-radius dc__no-top-border dc__no-left-border dc__no-right-border dc__word-break"
-                Icon={ICErrorExclamation}
-                iconClass="icon-dim-16"
-                linkClass="dc__truncate--clamp-6"
-            />
-        )
+        return <InfoBlock variant="error" description={errorText} {...manifestBorderConfig} />
     }
 
     const renderContent = () => {

src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.tsx

@@ -411,3 +411,17 @@ export const getDeploymentType = (deploymentAppType: DeploymentAppTypes): K8sRes
     }
     return K8sResourcePayloadDeploymentType.FLUXCD_INSTALLED
 }
+
+export const manifestBorderConfig = {
+    borderConfig: {
+      top: false,
+      left: false,
+      right: false,
+    },
+    borderRadiusConfig: {
+      top: false,
+      left: false,
+      right: false,
+      bottom: false,
+    },
+  };