This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 6bf32ba4f feat(config-ui): add tips for project incoming webhook
(#5119)
6bf32ba4f is described below
commit 6bf32ba4f1f531daf4aea3002995af4177a82724
Author: 青湛 <[email protected]>
AuthorDate: Mon May 8 10:09:15 2023 +0800
feat(config-ui): add tips for project incoming webhook (#5119)
* feat(config-ui): add new component alert
* feat(config-ui): add tips for project incoming webhook
---
.../src/components/{index.ts => alert/index.tsx} | 32 +++++-----
config-ui/src/components/index.ts | 1 +
.../project/detail/panel/incoming-webhooks.tsx | 71 +++++++++++++---------
3 files changed, 61 insertions(+), 43 deletions(-)
diff --git a/config-ui/src/components/index.ts
b/config-ui/src/components/alert/index.tsx
similarity index 66%
copy from config-ui/src/components/index.ts
copy to config-ui/src/components/alert/index.tsx
index a9948ea4c..87a74ed2a 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/alert/index.tsx
@@ -16,17 +16,21 @@
*
*/
-export * from './action';
-export * from './card';
-export * from './dialog';
-export * from './divider';
-export * from './inspector';
-export * from './loading';
-export * from './logo';
-export * from './no-data';
-export * from './page-header';
-export * from './selector';
-export * from './table';
-export * from './toast';
-export * from './tooltip';
-export * from './workflow';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ padding: 24px;
+ background: #f0f4fe;
+ border: 1px solid #bdcefb;
+ border-radius: 4px;
+`;
+
+interface Props {
+ style?: React.CSSProperties;
+ content?: React.ReactNode;
+ children?: React.ReactNode;
+}
+
+export const Alert = ({ style, content, children }: Props) => {
+ return <Wrapper style={style}>{content ?? children}</Wrapper>;
+};
diff --git a/config-ui/src/components/index.ts
b/config-ui/src/components/index.ts
index a9948ea4c..c511defde 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -17,6 +17,7 @@
*/
export * from './action';
+export * from './alert';
export * from './card';
export * from './dialog';
export * from './divider';
diff --git a/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx
b/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx
index 45ad0432d..27fde2ede 100644
--- a/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx
+++ b/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx
@@ -16,10 +16,10 @@
*
*/
-import React, { useState, useMemo } from 'react';
+import { useState, useMemo } from 'react';
import { Button, Intent } from '@blueprintjs/core';
-import { NoData } from '@/components';
+import { Alert, NoData } from '@/components';
import type { WebhookItemType } from '@/plugins/register/webook';
import { WebhookCreateDialog, WebhookSelectorDialog, WebHookConnection } from
'@/plugins/register/webook';
@@ -56,31 +56,44 @@ export const IncomingWebhooksPanel = ({
setType(undefined);
};
- if (!webhookIds.length) {
- return (
- <>
- <NoData
- text="Push `incidents` or `deployments` from your tools by incoming
webhooks."
- action={
- <>
- <Button intent={Intent.PRIMARY} icon="plus" text="Add a Webhook"
onClick={() => setType('create')} />
- <div style={{ margin: '8px 0' }}>or</div>
- <Button
- outlined
- intent={Intent.PRIMARY}
- text="Select Existing Webhooks"
- onClick={() => setType('selectExist')}
- />
- </>
- }
- />
- {type === 'create' && <WebhookCreateDialog isOpen
onCancel={handleCancel} onSubmitAfter={onCreateWebhook} />}
- {type === 'selectExist' && (
- <WebhookSelectorDialog isOpen saving={saving}
onCancel={handleCancel} onSubmit={onSelectWebhook} />
- )}
- </>
- );
- }
-
- return <WebHookConnection filterIds={webhookIds}
onCreateAfter={onCreateWebhook} onDeleteAfter={onDeleteWebhook} />;
+ return (
+ <>
+ <Alert style={{ marginBottom: 24, color: '#3C5088' }}>
+ <div>
+ The data pushed by Webhooks will only be calculated for DORA in the
next run of the Blueprint of this project
+ because DORA relies on the post-processing of "deployments,"
"incidents," and "pull requests" triggered by
+ running the blueprint.
+ </div>
+ <div style={{ marginTop: 16 }}>
+ To calculate DORA after receiving Webhook data immediately, you can
visit the{' '}
+ <b style={{ textDecoration: 'underline' }}>Status tab</b> of the
Blueprint page and click on Run Now.
+ </div>
+ </Alert>
+ {!webhookIds.length ? (
+ <>
+ <NoData
+ text="Push `incidents` or `deployments` from your tools by
incoming webhooks."
+ action={
+ <>
+ <Button intent={Intent.PRIMARY} icon="plus" text="Add a
Webhook" onClick={() => setType('create')} />
+ <div style={{ margin: '8px 0' }}>or</div>
+ <Button
+ outlined
+ intent={Intent.PRIMARY}
+ text="Select Existing Webhooks"
+ onClick={() => setType('selectExist')}
+ />
+ </>
+ }
+ />
+ {type === 'create' && <WebhookCreateDialog isOpen
onCancel={handleCancel} onSubmitAfter={onCreateWebhook} />}
+ {type === 'selectExist' && (
+ <WebhookSelectorDialog isOpen saving={saving}
onCancel={handleCancel} onSubmit={onSelectWebhook} />
+ )}
+ </>
+ ) : (
+ <WebHookConnection filterIds={webhookIds}
onCreateAfter={onCreateWebhook} onDeleteAfter={onDeleteWebhook} />
+ )}
+ </>
+ );
};
