Merge pull request #764 from devtron-labs/feat/info-clock-v2

feat: Deployment history config diff info block replacement & removal of Info color bar

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.15.0-pre-0",
+    "version": "1.15.0-pre-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -25,7 +25,6 @@ import {
     Severity,
     PolicyBlockInfo,
     TargetPlatformItemDTO,
-    ButtonProps,
     ComponentLayoutType,
     StatusType,
     DocLinkProps,
@@ -230,56 +229,6 @@ export enum ImageType {
     Medium = 'medium',
     SMALL = 'small',
 }
-
-interface InfoColourBarTextConfigType {
-    /**
-     * If given would be shown above the description, in bold
-     */
-    heading?: string
-    /**
-     * If given would be shown below the heading (if given)
-     */
-    description: string
-    actionButtonConfig?: ButtonProps
-}
-
-type InfoColourBarMessageProp =
-    | {
-          message: ReactNode
-          linkText?: ReactNode
-          redirectLink?: string
-          linkOnClick?: () => void
-          linkClass?: string
-          internalLink?: boolean
-
-          textConfig?: never
-      }
-    | {
-          textConfig: InfoColourBarTextConfigType
-
-          message?: never
-          linkText?: never
-          redirectLink?: never
-          linkOnClick?: () => never
-          linkClass?: never
-          internalLink?: never
-      }
-
-export type InfoColourBarType = InfoColourBarMessageProp & {
-    classname: string
-    Icon
-    iconClass?: string
-    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
-    renderActionButton?: () => JSX.Element
-    styles?: CSSProperties
-    /**
-     * If true, the icon is not shown
-     *
-     * @default false
-     */
-    hideIcon?: boolean
-}
-
 export interface ReloadType {
     reload?: (event?: any) => void
     className?: string

src/Common/InfoColorBar/InfoColourbar.tsx

@@ -41,7 +41,6 @@ export * from './Helper'
 export * from './Hooks'
 export * from './ImageTags'
 export * from './ImageTags.Types'
-export { default as InfoColourBar } from './InfoColorBar/InfoColourbar'
 export * from './Markdown'
 export * from './Modals/Modal'
 export * from './Modals/VisibleModal'

src/Common/InfoColorBar/infoColourBar.scss

@@ -17,13 +17,13 @@
 import { useMemo, useState } from 'react'
 import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 
-import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { useAsync } from '@Common/Helper'
 import { useUrlFilters } from '@Common/Hooks'
-import { GenericEmptyState, InfoColourBar, SortingOrder } from '@Common/index'
+import { GenericEmptyState, SortingOrder } from '@Common/index'
 import { Progressing } from '@Common/Progressing'
 import { DEPLOYMENT_CONFIG_DIFF_SORT_KEY, getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
+import { InfoBlock } from '@Shared/Components/InfoBlock'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
 import { useMainContext } from '@Shared/Providers'
 import { EnvResourceType, getAppEnvDeploymentConfig, getCompareSecretsData } from '@Shared/Services'
@@ -262,10 +262,9 @@ export const DeploymentHistoryConfigDiff = ({
                                         )}
                                     </div>
                                     {hasPreviousDeploymentConfigNotFoundError && (
-                                        <InfoColourBar
-                                            classname="error_bar cn-9 fs-13 lh-20"
-                                            Icon={ICError}
-                                            message="Diff unavailable: Configurations for previous deployment not found."
+                                        <InfoBlock
+                                            variant="error"
+                                            description="Diff unavailable: Configurations for previous deployment not found."
                                         />
                                     )}
                                 </div>

src/Common/Types.ts

@@ -14,13 +14,11 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
-import { InfoColourBar } from '@Common/index'
+import { InfoBlock } from '../InfoBlock'
 
 export const renderHashiOrAwsDeprecatedInfo = () => (
-    <InfoColourBar
-        classname="warn"
-        message={
+    <InfoBlock
+        description={
             <p className="m-0 cn-9 fs-13 lh-20">
                 <span>
                     Kubernetes External Secret (KES) has been deprecated and will be removed in the next Devtron
@@ -37,7 +35,6 @@ export const renderHashiOrAwsDeprecatedInfo = () => (
                 </a>
             </p>
         }
-        Icon={ICWarningY5}
-        iconSize={20}
+        variant="warning"
     />
 )