This is an automated email from the ASF dual-hosted git repository.
likyh 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 271142dd1 refactor(config-ui): optimize some content (#4150)
271142dd1 is described below
commit 271142dd1c6c47ad4e94192de59f3e0c6499a8c6
Author: 青湛 <[email protected]>
AuthorDate: Mon Jan 9 21:47:29 2023 +0800
refactor(config-ui): optimize some content (#4150)
* feat(config-ui): add some description for inspector
* refactor(config-ui): adjust the advanced github example
* refactor(config-ui): tips for optimizing connection test failure
* fix(config-ui): adjust the style for github transformation
* fix(config-ui): hide the beta connection for transformation page
---
config-ui/src/components/inspector/index.tsx | 1 +
config-ui/src/components/inspector/styled.ts | 6 +++++-
.../blueprint/components/advanced-editor/example/general.ts | 4 ++--
.../blueprint/components/advanced-editor/example/github.ts | 4 ++--
config-ui/src/pages/connection/form/use-form.ts | 2 +-
.../src/plugins/github/components/code-review/index.tsx | 8 ++++----
.../src/plugins/github/components/code-review/styled.ts | 12 ++++++------
config-ui/src/store/transformations/use-context-value.ts | 2 +-
8 files changed, 22 insertions(+), 17 deletions(-)
diff --git a/config-ui/src/components/inspector/index.tsx
b/config-ui/src/components/inspector/index.tsx
index d3b396dda..17c75ca50 100644
--- a/config-ui/src/components/inspector/index.tsx
+++ b/config-ui/src/components/inspector/index.tsx
@@ -50,6 +50,7 @@ export const Inspector = ({ isOpen, data, title, onClose }:
Props) => {
<h3>JSON CONFIGURATION</h3>
<span>application/json</span>
</div>
+ <p className="description">This is the configuration format used in a
blueprint's advanced mode.</p>
<div className="content">
<code>
<pre>{JSON.stringify(data, null, ' ')}</pre>
diff --git a/config-ui/src/components/inspector/styled.ts
b/config-ui/src/components/inspector/styled.ts
index be3c8dbcf..163b99dd0 100644
--- a/config-ui/src/components/inspector/styled.ts
+++ b/config-ui/src/components/inspector/styled.ts
@@ -38,8 +38,12 @@ export const Container = styled.div`
}
}
+ p.description {
+ margin: 8px 0 16px;
+ font-size: 12px;
+ }
+
.content {
- margin-top: 16px;
padding: 10px;
max-height: 600;
background-color: #ffff;
diff --git
a/config-ui/src/pages/blueprint/components/advanced-editor/example/general.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/general.ts
index d101e24e2..2005bfa90 100644
---
a/config-ui/src/pages/blueprint/components/advanced-editor/example/general.ts
+++
b/config-ui/src/pages/blueprint/components/advanced-editor/example/general.ts
@@ -42,8 +42,8 @@ const general = [
{
plugin: 'github',
options: {
- repo: 'lake',
- owner: 'merico-dev',
+ repo: 'incubator-devlake',
+ owner: 'apache',
connectionId: 1,
},
},
diff --git
a/config-ui/src/pages/blueprint/components/advanced-editor/example/github.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/github.ts
index d8cc32357..ef265e1f5 100644
--- a/config-ui/src/pages/blueprint/components/advanced-editor/example/github.ts
+++ b/config-ui/src/pages/blueprint/components/advanced-editor/example/github.ts
@@ -21,8 +21,8 @@ const github = [
{
plugin: 'github',
options: {
- repo: 'lake',
- owner: 'merico-dev',
+ repo: 'incubator-devlake',
+ owner: 'apache',
connectionId: 1,
},
},
diff --git a/config-ui/src/pages/connection/form/use-form.ts
b/config-ui/src/pages/connection/form/use-form.ts
index 97ab6318e..e2bbafffe 100644
--- a/config-ui/src/pages/connection/form/use-form.ts
+++ b/config-ui/src/pages/connection/form/use-form.ts
@@ -55,7 +55,7 @@ export const useForm = ({ plugin, id }: Props) => {
const handleTest = async (payload: any) => {
const [success] = await operator(() => API.testConnection(plugin,
payload), {
setOperating,
- formatReason: (err) => (err as any)?.response?.data?.message,
+ formatReason: () => 'Test Failed.Please check your configuration.',
});
if (success) {
diff --git a/config-ui/src/plugins/github/components/code-review/index.tsx
b/config-ui/src/plugins/github/components/code-review/index.tsx
index 688447228..f34172708 100644
--- a/config-ui/src/plugins/github/components/code-review/index.tsx
+++ b/config-ui/src/plugins/github/components/code-review/index.tsx
@@ -65,12 +65,12 @@ export const CodeReview = ({ transformation,
setTransformation }: Props) => {
<FormGroup
inline
label={
- <span>
+ <S.Tips>
PR Body Pattern
<Popover2
position={Position.TOP}
content={
- <S.Tips>
+ <S.TipsContent>
<p>
<Icon icon="tick-circle" size={10} color={Colors.GREEN4}
style={{ marginRight: '4px' }} />
Example 1: PR #321 body contains "<strong>Closes
#1234</strong>" (PR #321 and issue #1234 will be
@@ -81,12 +81,12 @@ export const CodeReview = ({ transformation,
setTransformation }: Props) => {
Example 2: PR #321 body contains "<strong>Related to
#1234</strong>" (PR #321 and issue #1234 will
NOT be mapped by the following RegEx)
</p>
- </S.Tips>
+ </S.TipsContent>
}
>
<Icon icon="help" size={12} color={Colors.GRAY3} style={{
marginLeft: '4px', marginBottom: '4px' }} />
</Popover2>
- </span>
+ </S.Tips>
}
>
<TextArea
diff --git a/config-ui/src/plugins/github/components/code-review/styled.ts
b/config-ui/src/plugins/github/components/code-review/styled.ts
index 0c8964bf6..6b79162dc 100644
--- a/config-ui/src/plugins/github/components/code-review/styled.ts
+++ b/config-ui/src/plugins/github/components/code-review/styled.ts
@@ -18,11 +18,11 @@
import styled from 'styled-components';
-export const Tips = styled.p`
- margin: 24px 0 0;
+export const Tips = styled.div`
+ display: flex;
+ align-items: center;
+`;
- span:last-child {
- color: #7497f7;
- cursor: pointer;
- }
+export const TipsContent = styled.div`
+ padding: 8px;
`;
diff --git a/config-ui/src/store/transformations/use-context-value.ts
b/config-ui/src/store/transformations/use-context-value.ts
index dcd63573c..4914a29b8 100644
--- a/config-ui/src/store/transformations/use-context-value.ts
+++ b/config-ui/src/store/transformations/use-context-value.ts
@@ -27,7 +27,7 @@ export const useContextValue = () => {
const [loading, setLoading] = useState(false);
const [transformations, setTransformations] =
useState<TransformationItemType[]>([]);
- const allConnections = useMemo(() => PluginConfig.filter((p) => p.type ===
PluginType.Connection), []);
+ const allConnections = useMemo(() => PluginConfig.filter((p) => p.type ===
PluginType.Connection && !p.isBeta), []);
const getTransformation = async (plugin: Plugins) => {
try {
