(incubator-devlake) 22/39: fix: some bugs for dora config

[mintsweet]

This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch feat-dora-config
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit b0559babc77dadd959ac38cadee1e94a51f9b7cb
Author: mintsweet <0x1304...@gmail.com>
AuthorDate: Sat Sep 14 22:12:22 2024 +1200

    fix: some bugs for dora config
---
 .../plugins/components/check-matched-items/index.tsx   | 18 +++++++++++++-----
 config-ui/src/plugins/register/github/workflow-run.tsx |  4 ++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/config-ui/src/plugins/components/check-matched-items/index.tsx 
b/config-ui/src/plugins/components/check-matched-items/index.tsx
index 58c05dd30..420b739fa 100644
--- a/config-ui/src/plugins/components/check-matched-items/index.tsx
+++ b/config-ui/src/plugins/components/check-matched-items/index.tsx
@@ -16,7 +16,7 @@
  *
  */
 
-import { useState, useReducer } from 'react';
+import { useState, useReducer, useEffect } from 'react';
 import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
 import { Flex, Button, Tag } from 'antd';
 
@@ -24,10 +24,12 @@ import API from '@/api';
 import type { ITransform2deployments } from '@/api/scope-config/types';
 import { ExternalLink } from '@/components';
 
-const reducer = (state: ITransform2deployments[], action: { type: string; 
payload: ITransform2deployments[] }) => {
+const reducer = (state: ITransform2deployments[], action: { type: string; 
payload?: ITransform2deployments[] }) => {
   switch (action.type) {
+    case 'RESET':
+      return [];
     case 'APPEND':
-      return [...state, ...action.payload];
+      return [...state, ...(action.payload ?? [])];
     default:
       return state;
   }
@@ -40,12 +42,17 @@ interface Props {
 }
 
 export const CheckMatchedItems = ({ plugin, connectionId, transformation }: 
Props) => {
+  const [inital, setInitial] = useState(false);
   const [page, setPage] = useState(1);
-  const [total, setTotal] = useState<number>();
+  const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
 
   const [state, dispatch] = useReducer(reducer, []);
 
+  useEffect(() => {
+    dispatch({ type: 'RESET' });
+  }, [transformation.deploymentPattern, transformation.productionPattern]);
+
   const handleLoadItems = async () => {
     setLoading(true);
     const res = await API.scopeConfig.transform2deployments(plugin, 
connectionId, {
@@ -57,6 +64,7 @@ export const CheckMatchedItems = ({ plugin, connectionId, 
transformation }: Prop
 
     dispatch({ type: 'APPEND', payload: res.data ?? [] });
 
+    setInitial(true);
     setPage(page + 1);
     setTotal(res.total);
     setLoading(false);
@@ -69,7 +77,7 @@ export const CheckMatchedItems = ({ plugin, connectionId, 
transformation }: Prop
           Check Matched Items
         </Button>
       </div>
-      {total ? (
+      {inital ? (
         total === 0 ? (
           <p>No item found</p>
         ) : (
diff --git a/config-ui/src/plugins/register/github/workflow-run.tsx 
b/config-ui/src/plugins/register/github/workflow-run.tsx
index 2f9beca89..2a22be541 100644
--- a/config-ui/src/plugins/register/github/workflow-run.tsx
+++ b/config-ui/src/plugins/register/github/workflow-run.tsx
@@ -28,6 +28,7 @@ const Wrapper = styled.div`
   width: 100%;
   font-size: 12px;
   background-color: #fff;
+  box-sizing: border-box;
   overflow: hidden;
 
   li {
@@ -71,8 +72,7 @@ export const WorkflowRun = () => {
         <li>
           <div>
             In the first input field, enter the following regex to identify 
deployments (highlighted by the{' '}
-            <span className="yellow">yellow</span>
-            rectangle):
+            <span className="yellow">yellow</span> rectangle):
           </div>
           <div style={{ marginTop: 10 }}>
             The name of the <strong>GitHub workflow run</strong> or 
<strong>one of its jobs</strong> matches{' '}