[incubator-devlake] branch main updated: feat(config-ui): add jenkins no scope tips (#4035)

[zky]

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

zky 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 59cb1419a feat(config-ui): add jenkins no scope tips (#4035)
59cb1419a is described below

commit 59cb1419a16133c8d0706fcfe76a7298964682bf
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Fri Dec 30 13:59:38 2022 +0800

    feat(config-ui): add jenkins no scope tips (#4035)
---
 config-ui/src/layouts/base/styled.ts                    |  1 +
 .../pages/blueprint/detail/blueprint-detail-page.tsx    | 16 +++++++++++++++-
 config-ui/src/pages/blueprint/detail/styled.ts          | 17 +++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/config-ui/src/layouts/base/styled.ts 
b/config-ui/src/layouts/base/styled.ts
index 6fc945334..8ef7405d4 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -77,6 +77,7 @@ export const Sider = styled.div`
 `;
 
 export const Inner = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column;
   flex: auto;
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx 
b/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx
index bfbde9404..48a472a1e 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx
@@ -16,19 +16,28 @@
  *
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { PageHeader, PageLoading } from '@/components';
+import { Plugins } from '@/plugins';
 
 import { useDetail } from './use-detail';
 import { BlueprintDetail } from './blueprint-detail';
 
+import * as S from './styled';
+
 export const BlueprintDetailPage = () => {
   const { id } = useParams<{ id: string }>();
 
   const { loading, blueprint } = useDetail({ id });
 
+  const showJenkinsTips = useMemo(() => {
+    const jenkins = blueprint && blueprint.settings.connections.find((cs) => 
cs.plugin === Plugins.Jenkins);
+
+    return !jenkins?.scopes.length;
+  }, [blueprint]);
+
   if (loading || !blueprint) {
     return <PageLoading />;
   }
@@ -41,6 +50,11 @@ export const BlueprintDetailPage = () => {
       ]}
     >
       <BlueprintDetail id={blueprint.id} />
+      {showJenkinsTips && (
+        <S.JenkinsTips>
+          <p>Please add the "Jenkins jobs" to collect before this Blueprint 
can run again.</p>
+        </S.JenkinsTips>
+      )}
     </PageHeader>
   );
 };
diff --git a/config-ui/src/pages/blueprint/detail/styled.ts 
b/config-ui/src/pages/blueprint/detail/styled.ts
index 60c2fa15e..9b480e23d 100644
--- a/config-ui/src/pages/blueprint/detail/styled.ts
+++ b/config-ui/src/pages/blueprint/detail/styled.ts
@@ -96,3 +96,20 @@ export const StatusPanel = styled.div`
     margin-top: 32px;
   }
 `;
+
+export const JenkinsTips = styled.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3c5088;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+
+  p {
+    margin: 0;
+    color: #fff;
+  }
+`;