feat: error prompt2 for new design

Author: Boelroy

packages/ui/xconsole-error-center/package.json

@@ -40,6 +40,7 @@
     "react-dom": "^16.8.6"
   },
   "dependencies": {
+    "@alicloud/console-base-error-prompt-proxy": "^1.3.5",
     "lodash": "^4.0.0",
     "react-copy-to-clipboard": "^5.0.3"
   },

packages/ui/xconsole-error-center/src/ErrorPrompt.tsx

@@ -57,10 +57,6 @@ const getErrorConfig = (
   };
 }
 
-// TODO: Error 按钮的隐藏
-// TODO: Icon 的展示
-// TODO: 新开窗口
-
 const CopyIcon = ({data}: {data: string}) => {
   return (
     <Balloon align="r" trigger={

packages/ui/xconsole-error-center/src/ErrorPrompt2.tsx

@@ -0,0 +1,88 @@
+import isFunction from 'lodash/isFunction';
+import errorPrompt from '@alicloud/console-base-error-prompt-proxy';
+
+import {
+  ResponseError, ErrorCodeConfig,
+  GetMessageCallback, ErrorCodeConfigCallback
+} from './type';
+
+interface ShowErrorOption {
+  error: ResponseError;
+  errorConfig?: Partial<ErrorCodeConfig> | ErrorCodeConfigCallback;
+  getMessage?: GetMessageCallback;
+}
+
+const getRealMessage = (error: ResponseError, errorConfig: Partial<ErrorCodeConfig>, getMessage?: GetMessageCallback) => {
+
+  if (errorConfig.message) {
+    if (isFunction(errorConfig.message)) {
+      return errorConfig.message(error);
+    }
+    return errorConfig.message;
+  }
+
+  const code = error?.response?.data?.code || 'UNKNOWN_ERROR';
+  const errorMessage = error?.response?.data?.message || error.message || error?.response?.data?.code;
+  if (getMessage) {
+    return getMessage(code, errorMessage, error)
+  }
+
+  return errorMessage;
+}
+
+const getErrorConfig = (
+  errorConfig: Partial<ErrorCodeConfig> | ErrorCodeConfigCallback | undefined,
+  error: ResponseError,
+  getMessage?: GetMessageCallback
+) => {
+
+  if (isFunction(errorConfig)) {
+    return errorConfig(error)
+  }
+
+  return {
+    ...errorConfig,
+    message: getRealMessage(error, errorConfig || {}, getMessage)
+  };
+}
+
+
+const processError = (errorConfig: Partial<ErrorCodeConfig>, error: ResponseError) => {
+  return {
+    name: error.name,
+    message: errorConfig.message,
+    title: errorConfig.title,
+    requestId: error?.response?.data.requestId,
+    details: {
+      url: error?.response?.config.url,
+      method: error?.response?.config?.method,
+      params: error?.response?.config?.params,
+    },
+    code: error?.response?.data?.code,
+    stack: error.stack,
+  }
+}
+
+const showError = (option: ShowErrorOption) => {
+  const { error, getMessage } = option;
+  const code = error?.response?.data?.code;
+  const errorConfig = getErrorConfig(option.errorConfig, error, getMessage);
+
+  if(process.env.NODE_ENV === 'development' && (errorConfig.cancelLabel || errorConfig.cancelHref)) {
+    console.warn(`[XConsole error-center]: cancelLabel and cancelHref will be ignored`)
+  }
+
+  if (errorConfig.ignore || code === 'FoundRiskAndDoubleConfirm') {
+    return;
+  }
+
+  errorPrompt(processError(errorConfig, error), {
+    title: errorConfig.title,
+    button: errorConfig.confirmLabel && {
+      href: errorConfig.confirmHref,
+      children: errorConfig.confirmLabel,
+    }
+  })
+}
+
+export default showError;

packages/ui/xconsole-error-center/src/index2.tsx

@@ -0,0 +1,36 @@
+import isFunction from 'lodash/isFunction';
+import innerErrorPrompt from './ErrorPrompt2';
+import { ResponseError, ErrorCenterOption, ErrorPromptOption } from './type';
+
+const ErrorCenter = (errorCenterOption: ErrorCenterOption) => {
+  const { enable = false, errorCodes, getMessage } = errorCenterOption;
+
+  return {
+    onError(err: ResponseError) {
+      if (!enable) return false
+
+      const valideErrorCodes = Object.assign({}, isFunction(errorCodes) ? errorCodes(err) : errorCodes || {});
+
+      if (process.env.NODE_ENV === 'development') {
+        console.error('[XConsole error-center]', err, err.response);
+      }
+
+      innerErrorPrompt({
+        error: err,
+        errorConfig: valideErrorCodes[err.response?.data?.code] || errorCenterOption.errorConfig ||{},
+        getMessage,
+      })
+      // @ts-ignore
+      err.preventDefault && err.preventDefault()
+    },
+  }
+};
+
+export const ErrorPrompt = (
+  error: ResponseError,
+  option: ErrorPromptOption = {}
+) => innerErrorPrompt({ error, ...option })
+
+export * from './type';
+
+export default ErrorCenter;

packages/ui/xconsole-error-center/stories/demo2/basic.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import ErrorPrompt from '../../src/ErrorPrompt2';
+
+const promptError = () => ErrorPrompt({ error: new Error('There is an error') });
+
+export default () => {
+  return (
+    <div>
+      <button onClick={promptError}> show prompt </button>
+    </div>
+  )
+}

packages/ui/xconsole-error-center/stories/demo2/config.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { select, text, boolean } from '@storybook/addon-knobs'
+import errorPrompt from '../../src/ErrorPrompt2';
+
+export default () => {
+  const message = text('Message', '自定义 Error ❌ ');
+  const ignore = boolean('Ignore', false);
+  const confirmLabel = text('ConfirmLabel', '去登录');
+  const cancelLabel = text('CancelLabel', '知道了');
+  const confirmHref = text('ConfirmHref', 'https://signin.aliyun.com/login.htm');
+  const cancelHref = text('CancelHref', 'https://signin.aliyun.com/login.htm');
+
+  const promptError = () => 
+    errorPrompt(
+      { 
+        errorConfig: {
+          title: '自定义 Error ❌',
+          message,
+          confirmLabel,
+          cancelLabel,
+          cancelHref,
+          confirmHref,
+          ignore,
+        },
+        error: new Error('There is an error')
+      },
+    );
+
+  return (
+    <div>
+      <button onClick={promptError}> show prompt </button>
+    </div>
+  )
+}

packages/ui/xconsole-error-center/stories/demo2/request.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {boolean } from '@storybook/addon-knobs'
+import errorPrompt from '../../src/ErrorPrompt2';
+
+const responseData = {
+  config: {
+    url: '/api/data.json',
+    method: 'get',
+  },
+  data: {
+    code: 'No_Permission1',
+    message: '没有权限',
+    requestId: 'xxxx-xxxx',
+    data: {}
+  }
+};
+
+const getError = () => {
+  const err = new Error('test');
+  // @ts-ignore
+  err.response = responseData;
+  return err;
+}
+
+const promptError = () => errorPrompt({
+  error: getError(),
+  errorConfig: {
+    message: '没有权限',
+  },
+  getMessage(code) {
+    return code;
+  }
+});
+
+export default () => {
+  return (
+    <div>
+      <button onClick={promptError}> show prompt </button>
+    </div>
+  )
+}

packages/ui/xconsole-error-center/stories/prompt2.stories.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { withKnobs } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react';
+import '@alicloud/xconsole-rc-error-prompt/dist/index.css';
+import '@alicloud/xconsole-rc-dialog/dist/index.css';
+import '@alicloud/console-components/dist/wind.css';
+import DemoBasic from './demo2/basic'
+import DemoConfig from './demo2/config'
+import DemoRequest from './demo2/request'
+
+
+storiesOf('XconsoleErrorPrompt2', module)
+  .addDecorator(withKnobs)
+  .add('Basic', () => <DemoBasic />)
+  .add('Config', () => <DemoConfig />)
+  .add('Request Error', () => <DemoRequest />)