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

Author: mintsweet

config-ui/src/components/alert/index.tsx

@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+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>;
+};

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

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} />
+      )}
+    </>
+  );
 };