(incubator-devlake) 25/48: refactor: use ShowMore component in github transformation

[mi...@apache.org]

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 3068ed89886560376f3cdd807f334eb67a891983
Author: mintsweet <0x...@gmail.com>
AuthorDate: Tue Sep 17 21:02:06 2024 +1200

    refactor: use ShowMore component in github transformation
---
 .../src/plugins/register/github/transformation.tsx | 38 +++++-----------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/config-ui/src/plugins/register/github/transformation.tsx b/config-ui/src/plugins/register/github/transformation.tsx
index fd8c6aea3..a81b1d428 100644
--- a/config-ui/src/plugins/register/github/transformation.tsx
+++ b/config-ui/src/plugins/register/github/transformation.tsx
@@ -17,17 +17,11 @@
  */
 
 import { useState, useEffect } from 'react';
-import {
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  CaretRightOutlined,
-  CaretDownFilled,
-  CaretRightFilled,
-} from '@ant-design/icons';
+import { CheckCircleOutlined, CloseCircleOutlined, CaretRightOutlined } from '@ant-design/icons';
 import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
-import { theme, Form, Collapse, Input, Tag, Checkbox, Button } from 'antd';
+import { theme, Form, Collapse, Input, Tag, Checkbox } from 'antd';
 
-import { HelpTooltip, ExternalLink } from '@/components';
+import { ShowMore, HelpTooltip, ExternalLink } from '@/components';
 import { DOC_URL } from '@/release';
 import { CheckMatchedItems, Deployments } from '@/plugins';
 
@@ -51,7 +45,6 @@ export const GitHubTransformation = ({
   setHasError,
 }: Props) => {
   const [useCustom, setUseCustom] = useState(false);
-  const [showCICD, setShowCICD] = useState(false);
 
   useEffect(() => {
     if (transformation.deploymentPattern || transformation.productionPattern) {
@@ -110,8 +103,6 @@ export const GitHubTransformation = ({
         onChangeTransformation: setTransformation,
         useCustom,
         onChangeUseCustom: handleChangeUseCustom,
-        showCICD,
-        onChangeShowCICD: setShowCICD,
       })}
     />
   );
@@ -126,8 +117,6 @@ const renderCollapseItems = ({
   onChangeTransformation,
   useCustom,
   onChangeUseCustom,
-  showCICD,
-  onChangeShowCICD,
 }: {
   plugin: string;
   connectionId: ID;
@@ -137,8 +126,6 @@ const renderCollapseItems = ({
   onChangeTransformation: any;
   useCustom: boolean;
   onChangeUseCustom: any;
-  showCICD: boolean;
-  onChangeShowCICD: any;
 }) =>
   [
     {
@@ -296,19 +283,12 @@ const renderCollapseItems = ({
           </Checkbox>
           {useCustom && (
             <div style={{ paddingLeft: 28 }}>
-              <p>
-                Select this option only if you are not enabling GitHub Deployments.{' '}
-                <Button
-                  type="link"
-                  size="small"
-                  icon={showCICD ? <CaretDownFilled /> : <CaretRightFilled />}
-                  iconPosition="end"
-                  onClick={() => onChangeShowCICD(!showCICD)}
-                >
-                  See how to configure
-                </Button>
-              </p>
-              {showCICD && <WorkflowRun />}
+              <ShowMore
+                text={<p>Select this option only if you are not enabling GitHub Deployments.</p>}
+                btnText="See how to configure"
+              >
+                <WorkflowRun />
+              </ShowMore>
               <div style={{ margin: '8px 0' }}>
                 <span>
                   The name of the <strong>GitHub workflow run</strong> or <strong> one of its jobs</strong> matches