From 0d9561a01c36c1366625ca7436518d1cb010671a Mon Sep 17 00:00:00 2001
From: mintsweet <0x1304570@gmail.com>
Date: Tue, 6 Aug 2024 19:41:08 +1200
Subject: [PATCH] feat: improve some description for onboard

---
 .../components/connection-form/fields/token.tsx     |  4 ++--
 config-ui/src/routes/onboard/step-1.tsx             | 13 ++++++++++++-
 config-ui/src/routes/onboard/step-2.tsx             |  9 ++++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/config-ui/src/plugins/components/connection-form/fields/token.tsx b/config-ui/src/plugins/components/connection-form/fields/token.tsx
index 904569e24f2..ce1e84f7eae 100644
--- a/config-ui/src/plugins/components/connection-form/fields/token.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/token.tsx
@@ -23,8 +23,8 @@ import { Block } from '@/components';
 
 interface Props {
   type: 'create' | 'update';
-  label?: string;
-  subLabel?: string;
+  label?: React.ReactNode;
+  subLabel?: React.ReactNode;
   initialValue: string;
   value: string;
   error: string;
diff --git a/config-ui/src/routes/onboard/step-1.tsx b/config-ui/src/routes/onboard/step-1.tsx
index 50d10a88977..219db1a3fd5 100644
--- a/config-ui/src/routes/onboard/step-1.tsx
+++ b/config-ui/src/routes/onboard/step-1.tsx
@@ -17,10 +17,12 @@
  */
 
 import { useState, useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
 import { Input, Flex, Button, message } from 'antd';
 
 import API from '@/api';
 import { Block, Markdown } from '@/components';
+import { PATHS } from '@/config';
 import { ConnectionSelect } from '@/plugins';
 import { validName } from '@/routes/project';
 import { operator } from '@/utils';
@@ -87,7 +89,16 @@ export const Step1 = () => {
               onChange={(e) => setProjectName(e.target.value)}
             />
           </Block>
-          <Block title="Data Connection" description="You can only choose one data connection" required>
+          <Block
+            title="Data Connection"
+            description={
+              <p>
+                For self-managed GitLab/GitHub/Bitbucket, please skip the onboarding and configure via{' '}
+                <Link to={PATHS.CONNECTIONS()}>Data Connections</Link>.
+              </p>
+            }
+            required
+          >
             <ConnectionSelect
               placeholder="Select a Data Connection"
               options={[
diff --git a/config-ui/src/routes/onboard/step-2.tsx b/config-ui/src/routes/onboard/step-2.tsx
index eb7afbba158..cd2eba4dccd 100644
--- a/config-ui/src/routes/onboard/step-2.tsx
+++ b/config-ui/src/routes/onboard/step-2.tsx
@@ -17,10 +17,12 @@
  */
 
 import { useState, useContext, useEffect, useMemo } from 'react';
+import { Link } from 'react-router-dom';
 import { Flex, Button, Tooltip } from 'antd';
 
 import API from '@/api';
 import { Markdown } from '@/components';
+import { PATHS } from '@/config';
 import { getPluginConfig } from '@/plugins';
 import { ConnectionToken } from '@/plugins/components/connection-form/fields/token';
 import { ConnectionUsername } from '@/plugins/components/connection-form/fields/username';
@@ -135,7 +137,12 @@ export const Step2 = () => {
             <ConnectionToken
               type="create"
               label="Personal Access Token"
-              subLabel={`Create a personal access token in ${config.name}`}
+              subLabel={
+                <p>
+                  Create a personal access token in GitHub. For self-managed {config.name}, please skip the onboarding
+                  and configure via <Link to={PATHS.CONNECTIONS()}>Data Connections</Link>.
+                </p>
+              }
               initialValue=""
               value={payload.token}
               setValue={(token) => {