From 4ed72121b831303291f3e049ec9af0c6edd92848 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Mon, 12 Jun 2023 19:11:14 +0800
Subject: [PATCH] feat(console): enable icon in modal header (#4023)

---
 .../console/src/components/ModalLayout/index.module.scss | 6 ++++++
 packages/console/src/components/ModalLayout/index.tsx    | 9 +++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/console/src/components/ModalLayout/index.module.scss b/packages/console/src/components/ModalLayout/index.module.scss
index e1cf2cd39..0f255bb68 100644
--- a/packages/console/src/components/ModalLayout/index.module.scss
+++ b/packages/console/src/components/ModalLayout/index.module.scss
@@ -17,6 +17,12 @@
     flex-shrink: 0;
     margin-bottom: _.unit(6);
 
+    .iconAndTitle {
+      display: flex;
+      flex-direction: column;
+      gap: _.unit(3);
+    }
+
     .closeIcon {
       color: var(--color-text-secondary);
     }
diff --git a/packages/console/src/components/ModalLayout/index.tsx b/packages/console/src/components/ModalLayout/index.tsx
index f7b32463c..f865f2b8b 100644
--- a/packages/console/src/components/ModalLayout/index.tsx
+++ b/packages/console/src/components/ModalLayout/index.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import type { ReactNode } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 
 import Close from '@/assets/images/close.svg';
 
@@ -16,6 +16,7 @@ type Props = {
   onClose?: () => void;
   className?: string;
   size?: 'medium' | 'large' | 'xlarge';
+  headerIcon?: ReactElement;
 } & Pick<CardTitleProps, 'learnMoreLink' | 'title' | 'subtitle' | 'isWordWrapEnabled'>;
 
 function ModalLayout({
@@ -24,12 +25,16 @@ function ModalLayout({
   onClose,
   className,
   size = 'medium',
+  headerIcon,
   ...cardTitleProps
 }: Props) {
   return (
     <Card className={classNames(styles.container, styles[size])}>
       <div className={styles.header}>
-        <CardTitle {...cardTitleProps} />
+        <div className={styles.iconAndTitle}>
+          {headerIcon}
+          <CardTitle {...cardTitleProps} />
+        </div>
         {onClose && (
           <IconButton
             onClick={() => {