[master] chore: sync codes (#4416)

chore: sync codes

Signed-off-by: donniean <[email protected]>
Co-authored-by: donniean <[email protected]>

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 (
-    <StyledModal
+    <ConfirmModal
       visible={visible}
-      header={null}
-      closable={false}
+      titleIconProps={{ type: 'info' }}
+      title={t('RESET_DEFAULT_CONFIGURATION_TITLE')}
+      description={t('RESET_DEFAULT_CONFIGURATION_CONFIRM_DESCRIPTION')}
       confirmLoading={confirmLoading}
       onCancel={onCancel}
       onOk={onOk}
-    >
-      <Header>
-        <Question size={20} />
-        <Title>{t('RESET_DEFAULT_CONFIGURATION_TITLE')}</Title>
-      </Header>
-      <Description>{t('RESET_DEFAULT_CONFIGURATION_CONFIRM_DESCRIPTION')}</Description>
-    </StyledModal>
+    />
   );
 }

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;

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<TitleIconProps, 'type'> = {
+    ...DEFAULT_TITLE_ICON_PROPS,
+    fill: palette.colors[fillColorName]?.[2],
+  };
+  const finalProps = merge({}, defaultProps, titleIconProps);
+
+  return <Icon {...finalProps} />;
+}

packages/core/src/containers/Extensions/Management/components/ResetDefaultConfigTip/ResetDefaultConfigConfirmModal.styles.ts → 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`

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 (
+    <StyledModal header={null} closable={false} {...rest}>
+      {hasHeader && (
+        <Header>
+          {renderTitleIcon({ titleIconProps, titleIcon })}
+          {title && <Title>{title}</Title>}
+        </Header>
+      )}
+      {description && <Description>{description}</Description>}
+    </StyledModal>
+  );
+}

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<ModalProps, 'title' | 'titleIcon'> {
+  titleIconProps?: TitleIconProps;
+  titleIcon?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+}

packages/shared/src/components/Modals/Confirm/index.ts

@@ -0,0 +1,2 @@
+export type { ConfirmModalProps } from './ConfirmModal.types';
+export * from './ConfirmModal';

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';