This is an automated email from the ASF dual-hosted git repository.
abeizn 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 4f65bce1e fix(config-ui): some bugs (#6295)
4f65bce1e is described below
commit 4f65bce1e9a82d76b66f5aa5658c21c351d20218
Author: 青湛 <[email protected]>
AuthorDate: Fri Oct 20 20:22:32 2023 +1300
fix(config-ui): some bugs (#6295)
* fix(config-ui): missed connections when refreshing connection detail page
* fix(config-ui): adjust the spacing for webhook
* fix(config-ui): adjust some content about api-keys
* fix(config-ui): hidden edit scope config when plugin doesn't have it
---
.../pages/blueprint/connection-detail/index.tsx | 15 +++++---
config-ui/src/pages/connection/detail/index.tsx | 13 ++-----
config-ui/src/plugins/register/webhook/styled.ts | 2 +-
config-ui/src/routes/api-keys/api-keys.tsx | 40 ++++++----------------
config-ui/src/routes/api-keys/styled.ts | 10 ------
5 files changed, 24 insertions(+), 56 deletions(-)
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx
b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index bae6b58f8..bb13c4b05 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -24,7 +24,7 @@ import { Popover2 } from '@blueprintjs/popover2';
import API from '@/api';
import { PageLoading, PageHeader, ExternalLink, Message, Buttons, Table,
Dialog } from '@/components';
import { useRefreshData, useTips } from '@/hooks';
-import { DataScopeSelect, getPluginScopeId } from '@/plugins';
+import { DataScopeSelect, getPluginScopeId, PluginConfig, PluginConfigType }
from '@/plugins';
import { operator } from '@/utils';
import { encodeName } from '../../project/utils';
@@ -50,8 +50,11 @@ export const BlueprintConnectionDetailPage = () => {
return API.blueprint.get(bid as any);
};
+ const [plugin, connectionId] = unique.split('-');
+
+ const pluginConfig = PluginConfig.find((p) => p.plugin === plugin) as
PluginConfigType;
+
const { ready, data } = useRefreshData(async () => {
- const [plugin, connectionId] = unique.split('-');
const [blueprint, connection] = await Promise.all([
getBlueprint(pname, bid),
API.connection.get(plugin, connectionId),
@@ -205,9 +208,11 @@ export const BlueprintConnectionDetailPage = () => {
</S.Top>
<Buttons position="top">
<Button intent={Intent.PRIMARY} icon="annotation" text="Manage Data
Scope" onClick={handleShowDataScope} />
- <ExternalLink style={{ marginLeft: 8 }}
link={`/connections/${connection.plugin}/${connection.id}`}>
- <Button intent={Intent.PRIMARY} icon="annotation" text="Edit Scope
Config" />
- </ExternalLink>
+ {pluginConfig.scopeConfig && (
+ <ExternalLink style={{ marginLeft: 8 }}
link={`/connections/${connection.plugin}/${connection.id}`}>
+ <Button intent={Intent.PRIMARY} icon="annotation" text="Edit Scope
Config" />
+ </ExternalLink>
+ )}
</Buttons>
<Table
columns={[
diff --git a/config-ui/src/pages/connection/detail/index.tsx
b/config-ui/src/pages/connection/detail/index.tsx
index 2668392f3..2ce5e207e 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/config-ui/src/pages/connection/detail/index.tsx
@@ -41,16 +41,6 @@ import { operator } from '@/utils';
import * as S from './styled';
export const ConnectionDetailPage = () => {
- const { plugin, id } = useParams() as { plugin: string; id: string };
- return <ConnectionDetail plugin={plugin} connectionId={+id} />;
-};
-
-interface Props {
- plugin: string;
- connectionId: ID;
-}
-
-const ConnectionDetail = ({ plugin, connectionId }: Props) => {
const [type, setType] = useState<
| 'deleteConnection'
| 'updateConnection'
@@ -71,6 +61,9 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) =>
{
const [conflict, setConflict] = useState<string[]>([]);
const [errorMsg, setErrorMsg] = useState('');
+ const { plugin, id } = useParams() as { plugin: string; id: string };
+ const connectionId = +id;
+
const connection = useAppSelector((state) => selectConnection(state,
`${plugin}-${connectionId}`)) as IConnection;
const navigate = useNavigate();
const { setTips } = useTips();
diff --git a/config-ui/src/plugins/register/webhook/styled.ts
b/config-ui/src/plugins/register/webhook/styled.ts
index 2ac463152..12d83227d 100644
--- a/config-ui/src/plugins/register/webhook/styled.ts
+++ b/config-ui/src/plugins/register/webhook/styled.ts
@@ -36,7 +36,7 @@ export const Wrapper = styled.div`
}
h5 {
- margin: 8px 0;
+ margin: 16px 0 8px;
}
p {
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx
b/config-ui/src/routes/api-keys/api-keys.tsx
index b37a525e0..cfb8419fc 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -18,22 +18,9 @@
import { useState, useMemo } from 'react';
import { Button, Intent, InputGroup } from '@blueprintjs/core';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
import API from '@/api';
-import {
- PageHeader,
- Table,
- Dialog,
- FormItem,
- Selector,
- ExternalLink,
- TextTooltip,
- IconButton,
- toast,
- Buttons,
- Message,
-} from '@/components';
+import { PageHeader, Table, Dialog, FormItem, Selector, ExternalLink,
CopyText, Message } from '@/components';
import { useRefreshData } from '@/hooks';
import { operator, formatTime } from '@/utils';
@@ -47,7 +34,7 @@ export const ApiKeys = () => {
const [operating, setOperating] = useState(false);
const [modal, setModal] = useState<'create' | 'show' | 'delete'>();
const [currentId, setCurrentId] = useState<string>();
- const [currentKey, setCurrentKey] = useState<string>();
+ const [currentKey, setCurrentKey] = useState<string>('');
const [form, setForm] = useState<{
name: string;
expiredAt?: string;
@@ -61,6 +48,7 @@ export const ApiKeys = () => {
const { data, ready } = useRefreshData(() => API.apiKey.list({ page,
pageSize }), [version, page, pageSize]);
const [dataSource, total] = useMemo(() => [data?.apikeys ?? [], data?.count
?? 0], [data]);
+ const hasError = useMemo(() => !form.name || !form.allowedPath, [form]);
const timeSelectedItem = useMemo(() => {
return C.timeOptions.find((it) => it.value === form.expiredAt ||
!it.value);
@@ -73,7 +61,6 @@ export const ApiKeys = () => {
const handleSubmit = async () => {
const [success, res] = await operator(() => API.apiKey.create(form), {
setOperating,
- hideToast: true,
});
if (success) {
@@ -164,6 +151,7 @@ export const ApiKeys = () => {
title="Generate a New API Key"
okLoading={operating}
okText="Generate"
+ okDisabled={hasError}
onCancel={handleCancel}
onOk={handleSubmit}
>
@@ -191,8 +179,8 @@ export const ApiKeys = () => {
subLabel={
<p>
Enter a Regular Expression that matches the API URL(s) from
the{' '}
- <ExternalLink link="">DevLake API docs</ExternalLink>. The
default Regular Expression is set to all
- APIs.
+ <ExternalLink link="/api/swagger/index.html">DevLake API
docs</ExternalLink>. The default Regular
+ Expression is set to all APIs.
</p>
}
required
@@ -216,18 +204,10 @@ export const ApiKeys = () => {
footer={null}
onCancel={handleCancel}
>
- <div>Please make sure to copy your API key now. You will not be able
to see it again.</div>
- <S.KeyContainer>
- <TextTooltip style={{ width: '96%' }} content="">
- {currentKey}
- </TextTooltip>
- <CopyToClipboard text={currentKey as string} onCopy={() =>
toast.success('Copy successfully.')}>
- <IconButton icon="clipboard" tooltip="Copy" />
- </CopyToClipboard>
- </S.KeyContainer>
- <Buttons position="bottom" align="right">
- <Button intent={Intent.PRIMARY} text="Confirm"
onClick={handleCancel} />
- </Buttons>
+ <div style={{ marginBottom: 16 }}>
+ Please make sure to copy your API key now. You will not be able to
see it again.
+ </div>
+ <CopyText content={currentKey} />
</Dialog>
)}
{modal === 'delete' && (
diff --git a/config-ui/src/routes/api-keys/styled.ts
b/config-ui/src/routes/api-keys/styled.ts
index 3838e3d19..9a4aa557a 100644
--- a/config-ui/src/routes/api-keys/styled.ts
+++ b/config-ui/src/routes/api-keys/styled.ts
@@ -26,13 +26,3 @@ export const InputContainer = styled.div`
margin-right: 4px;
}
`;
-
-export const KeyContainer = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 24px;
- margin-bottom: 16px;
- padding: 10px 16px;
- background: #f0f4fe;
-`;
