diff --git a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx b/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx
index d4e520663f3..a62060d1366 100644
--- a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx
+++ b/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.tsx
@@ -4,13 +4,12 @@
*/
import React from 'react';
-import type { ModalProps } from '@kubed/components';
-import { Question } from '@kubed/icons';
-import { StyledModal, Header, Title, Description } from './ResetDefaultConfigConfirmModal.styles';
+import type { ConfirmModalProps } from '@ks-console/shared';
+import { ConfirmModal } from '@ks-console/shared';
type ResetDefaultConfigConfirmModalProps = Pick<
- ModalProps,
+ ConfirmModalProps,
'visible' | 'confirmLoading' | 'onCancel' | 'onOk'
>;
@@ -21,19 +20,14 @@ export function ResetDefaultConfigConfirmModal({
onOk,
}: ResetDefaultConfigConfirmModalProps) {
return (
-
-
-
- {t('RESET_DEFAULT_CONFIGURATION_TITLE')}
-
- {t('RESET_DEFAULT_CONFIGURATION_CONFIRM_DESCRIPTION')}
-
+ />
);
}
diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.constants.ts b/packages/shared/src/components/Modals/Confirm/ConfirmModal.constants.ts
new file mode 100644
index 00000000000..d94e2e4e0e9
--- /dev/null
+++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.constants.ts
@@ -0,0 +1,21 @@
+import { Question, Exclamation, Failure } from '@kubed/icons';
+
+export const DEFAULT_TITLE_ICON_PROPS = {
+ size: 20,
+ color: '#fff',
+} as const;
+
+export const TITLE_ICON_TYPE_MAP = {
+ info: {
+ icon: Question,
+ fillColorName: 'blue',
+ },
+ warning: {
+ icon: Exclamation,
+ fillColorName: 'yellow',
+ },
+ error: {
+ icon: Failure,
+ fillColorName: 'red',
+ },
+} as const;
diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.helpers.tsx b/packages/shared/src/components/Modals/Confirm/ConfirmModal.helpers.tsx
new file mode 100644
index 00000000000..b4fe69c3b0c
--- /dev/null
+++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.helpers.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { merge } from 'lodash';
+import { useTheme } from '@kubed/components';
+
+import type { TitleIconProps, ConfirmModalProps } from './ConfirmModal.types';
+import { DEFAULT_TITLE_ICON_PROPS, TITLE_ICON_TYPE_MAP } from './ConfirmModal.constants';
+
+interface TitleIconOptions {
+ titleIconProps?: TitleIconProps;
+ titleIcon?: ConfirmModalProps['titleIcon'];
+}
+
+export function renderTitleIcon({ titleIconProps, titleIcon }: TitleIconOptions) {
+ const { palette } = useTheme();
+
+ if (titleIcon) {
+ return titleIcon;
+ }
+
+ if (!titleIconProps) {
+ return null;
+ }
+
+ const { icon: Icon, fillColorName } = TITLE_ICON_TYPE_MAP[titleIconProps.type];
+ const defaultProps: Omit = {
+ ...DEFAULT_TITLE_ICON_PROPS,
+ fill: palette.colors[fillColorName]?.[2],
+ };
+ const finalProps = merge({}, defaultProps, titleIconProps);
+
+ return ;
+}
diff --git a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts b/packages/shared/src/components/Modals/Confirm/ConfirmModal.styles.ts
similarity index 88%
rename from packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts
rename to packages/shared/src/components/Modals/Confirm/ConfirmModal.styles.ts
index bb6993c5f12..b09839c87f3 100644
--- a/packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts
+++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.styles.ts
@@ -25,11 +25,6 @@ export const Header = styled.div`
display: flex;
align-items: center;
column-gap: 4px;
-
- svg.kubed-icon {
- color: rgba(255, 255, 255, 0.9);
- fill: ${({ theme }) => theme.palette.colors.blue[2]};
- }
`;
export const Title = styled.h5`
diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.tsx b/packages/shared/src/components/Modals/Confirm/ConfirmModal.tsx
new file mode 100644
index 00000000000..0ca46f36f3d
--- /dev/null
+++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { ConfirmModalProps } from './ConfirmModal.types';
+import { renderTitleIcon } from './ConfirmModal.helpers';
+import { StyledModal, Header, Title, Description } from './ConfirmModal.styles';
+
+export function ConfirmModal({
+ titleIconProps,
+ titleIcon,
+ title,
+ description,
+ ...rest
+}: ConfirmModalProps) {
+ const hasHeader = title || titleIcon || titleIconProps;
+
+ return (
+
+ {hasHeader && (
+
+ {renderTitleIcon({ titleIconProps, titleIcon })}
+ {title && {title}}
+
+ )}
+ {description && {description}}
+
+ );
+}
diff --git a/packages/shared/src/components/Modals/Confirm/ConfirmModal.types.ts b/packages/shared/src/components/Modals/Confirm/ConfirmModal.types.ts
new file mode 100644
index 00000000000..1b0b3c12bb1
--- /dev/null
+++ b/packages/shared/src/components/Modals/Confirm/ConfirmModal.types.ts
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { ModalProps } from '@kubed/components';
+import type { Props } from '@kubed/icons';
+
+export interface TitleIconProps extends Props {
+ type: 'warning' | 'info' | 'error';
+}
+
+export interface ConfirmModalProps extends Omit {
+ titleIconProps?: TitleIconProps;
+ titleIcon?: ReactNode;
+ title?: ReactNode;
+ description?: ReactNode;
+}
diff --git a/packages/shared/src/components/Modals/Confirm/index.ts b/packages/shared/src/components/Modals/Confirm/index.ts
new file mode 100644
index 00000000000..f5fee6c7b10
--- /dev/null
+++ b/packages/shared/src/components/Modals/Confirm/index.ts
@@ -0,0 +1,2 @@
+export type { ConfirmModalProps } from './ConfirmModal.types';
+export * from './ConfirmModal';
diff --git a/packages/shared/src/components/index.ts b/packages/shared/src/components/index.ts
index 761f92eaf2b..5b3558a36b6 100644
--- a/packages/shared/src/components/index.ts
+++ b/packages/shared/src/components/index.ts
@@ -23,6 +23,7 @@ export { default as Pagination } from './Pagination';
export { default as Avatar } from './Avatar';
export { default as StatusReason } from './StatusReason';
+export * from './Modals/Confirm';
export * from './Modals/EnterLicense';
export * from './Modals/FullScreenModal';
export * from './Modals/KubeCtl';