You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2024/01/18 02:41:26 UTC
(incubator-devlake) branch fix-connection-form-not-reset created (now 47e7d0963)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a change to branch fix-connection-form-not-reset
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
at 47e7d0963 fix(config-ui): connection form not reset
This branch includes the following new commits:
new 47e7d0963 fix(config-ui): connection form not reset
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(incubator-devlake) 01/01: fix(config-ui): connection form not reset
Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch fix-connection-form-not-reset
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 47e7d09631b57e1ee00d8f28a8e52194bc27a02e
Author: mintsweet <0x...@gmail.com>
AuthorDate: Thu Jan 18 15:41:12 2024 +1300
fix(config-ui): connection form not reset
---
.../register/github/connection-fields/token.tsx | 89 ++++++++++++----------
config-ui/src/routes/connection/connections.tsx | 1 +
2 files changed, 49 insertions(+), 41 deletions(-)
diff --git a/config-ui/src/plugins/register/github/connection-fields/token.tsx b/config-ui/src/plugins/register/github/connection-fields/token.tsx
index 62b05bc0e..b6f835349 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -21,7 +21,7 @@ import { CloseOutlined, PlusOutlined, CheckCircleFilled, WarningFilled, CloseCir
import { Input, Button } from 'antd';
import API from '@/api';
-import { Block, ExternalLink } from '@/components';
+import { Block, ExternalLink, Loading } from '@/components';
import { DOC_URL } from '@/release';
import * as S from './styled';
@@ -56,6 +56,7 @@ export const Token = ({
setValue,
setError,
}: Props) => {
+ const [loading, setLoading] = useState(false);
const [tokens, setTokens] = useState<TokenItem[]>([{ value: '' }]);
const testToken = async (token: string): Promise<TokenItem> => {
@@ -88,6 +89,7 @@ export const Token = ({
};
const checkTokens = async (connectionId: ID) => {
+ setLoading(true);
const res = await API.connection.test('github', connectionId);
setTokens(
(res.tokens ?? []).map((it) => ({
@@ -97,6 +99,7 @@ export const Token = ({
status: !it.success ? 'error' : it.warning ? 'warning' : 'success',
})),
);
+ setLoading(false);
};
useEffect(() => {
@@ -146,47 +149,51 @@ export const Token = ({
}
required
>
- {tokens.map(({ value, isValid, status, from }, i) => (
- <S.Input key={i}>
- <div className="input">
- <Input
- style={{ width: 386 }}
- placeholder="Token"
- value={value}
- onChange={(e) => handleChangeToken(i, e.target.value)}
- onBlur={() => handleTestToken(i)}
- />
- <Button type="text" icon={<CloseOutlined />} onClick={() => handleRemoveToken(i)} />
- <div className="info">
- {isValid === false && <span className="error">Invalid</span>}
- {isValid === true && <span className="success">Valid From: {from}</span>}
+ {loading ? (
+ <Loading />
+ ) : (
+ tokens.map(({ value, isValid, status, from }, i) => (
+ <S.Input key={i}>
+ <div className="input">
+ <Input
+ style={{ width: 386 }}
+ placeholder="Token"
+ value={value}
+ onChange={(e) => handleChangeToken(i, e.target.value)}
+ onBlur={() => handleTestToken(i)}
+ />
+ <Button type="text" icon={<CloseOutlined />} onClick={() => handleRemoveToken(i)} />
+ <div className="info">
+ {isValid === false && <span className="error">Invalid</span>}
+ {isValid === true && <span className="success">Valid From: {from}</span>}
+ </div>
</div>
- </div>
- {status && (
- <S.Alert>
- <h4>
- {status === 'success' && <CheckCircleFilled style={{ color: '#4DB764' }} />}
- {status === 'warning' && <WarningFilled style={{ color: '#F4BE55' }} />}
- {status === 'error' && <CloseCircleFilled style={{ color: '#E34040' }} />}
- <span style={{ marginLeft: 8 }}>Token Permissions</span>
- </h4>
- {status === 'success' && <p>All required fields are checked.</p>}
- {status === 'warning' && (
- <p>
- This token is able to collect public repositories. If you want to collect private repositories, please
- check the field `repo`.
- </p>
- )}
- {status === 'error' && (
- <>
- <p>Please check the field(s) `repo:status`, `repo_deployment`, `read:user`, `read:org`.</p>
- <p>If you want to collect private repositories, please check the field `repo`.</p>
- </>
- )}
- </S.Alert>
- )}
- </S.Input>
- ))}
+ {status && (
+ <S.Alert>
+ <h4>
+ {status === 'success' && <CheckCircleFilled style={{ color: '#4DB764' }} />}
+ {status === 'warning' && <WarningFilled style={{ color: '#F4BE55' }} />}
+ {status === 'error' && <CloseCircleFilled style={{ color: '#E34040' }} />}
+ <span style={{ marginLeft: 8 }}>Token Permissions</span>
+ </h4>
+ {status === 'success' && <p>All required fields are checked.</p>}
+ {status === 'warning' && (
+ <p>
+ This token is able to collect public repositories. If you want to collect private repositories,
+ please check the field `repo`.
+ </p>
+ )}
+ {status === 'error' && (
+ <>
+ <p>Please check the field(s) `repo:status`, `repo_deployment`, `read:user`, `read:org`.</p>
+ <p>If you want to collect private repositories, please check the field `repo`.</p>
+ </>
+ )}
+ </S.Alert>
+ )}
+ </S.Input>
+ ))
+ )}
<div className="action">
<Button type="primary" size="small" icon={<PlusOutlined />} onClick={handleCreateToken}>
Another Token
diff --git a/config-ui/src/routes/connection/connections.tsx b/config-ui/src/routes/connection/connections.tsx
index f88beff58..12addb09b 100644
--- a/config-ui/src/routes/connection/connections.tsx
+++ b/config-ui/src/routes/connection/connections.tsx
@@ -168,6 +168,7 @@ export const Connections = () => {
)}
{type === 'form' && pluginConfig && (
<Modal
+ destroyOnClose
open
width={820}
centered