fix(config-ui): some bugs (#4892)
* fix(config-ui): missed transformationType in plugin config
* fix(config-ui): transformation select cannot get default selected
* refactor(config-ui): adjust the margin top for layout main
* fix(config-ui): adjust the style for project dialog
* fix(config-ui): adjust the wording in blueprint create page
* fix(config-ui): missed spaces in github connection token
* fix(config-ui): rename e.g to e.g. in connection proxy
* fix(config-ui): updated doc link
* fix(config-ui): adjust the wording in transformation
diff --git a/config-ui/src/layouts/base/base.tsx b/config-ui/src/layouts/base/base.tsx
index 8e6e06a..5716f8c 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -108,7 +108,7 @@
</ExternalLink>
</S.DashboardIcon>
<Navbar.Divider />
- <a href="https://devlake.apache.org/docs/UserManuals/ConfigUI/Tutorial/" rel="noreferrer" target="_blank">
+ <a href="https://devlake.apache.org/docs/Configuration/Tutorial" rel="noreferrer" target="_blank">
<img src={FileIcon} alt="documents" />
<span>Docs</span>
</a>
diff --git a/config-ui/src/layouts/base/styled.ts b/config-ui/src/layouts/base/styled.ts
index e6bdc9d..81ca521 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -112,6 +112,7 @@
export const Inner = styled.div`
flex: auto;
+ margin-top: 24px;
overflow: auto;
`;
diff --git a/config-ui/src/pages/blueprint/create/components/step-1.tsx b/config-ui/src/pages/blueprint/create/components/step-1.tsx
index 5234e56..725ac59 100644
--- a/config-ui/src/pages/blueprint/create/components/step-1.tsx
+++ b/config-ui/src/pages/blueprint/create/components/step-1.tsx
@@ -17,6 +17,7 @@
*/
import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
import { InputGroup, Icon, Button, Intent } from '@blueprintjs/core';
import { Card, Divider, MultiSelector, Loading } from '@/components';
@@ -77,8 +78,10 @@
<Card className="card">
<h2>Add Data Connections</h2>
<Divider />
- <h3>Select Connections</h3>
- <p>Select from existing or create new connections</p>
+ <p>
+ If you have not created any connections yet, please <Link to="/connections">create connections</Link>{' '}
+ first.
+ </p>
<MultiSelector
placeholder="Select Connections..."
items={connections}
diff --git a/config-ui/src/pages/project/home/styled.ts b/config-ui/src/pages/project/home/styled.ts
index a0624cf..92f7163 100644
--- a/config-ui/src/pages/project/home/styled.ts
+++ b/config-ui/src/pages/project/home/styled.ts
@@ -31,7 +31,13 @@
display: flex;
margin-top: 8px;
+ & > .bp4-control {
+ margin: 0;
+ }
+
& > p {
+ display: flex;
+ align-items: center;
margin: 0 0 0 16px;
}
}
diff --git a/config-ui/src/plugins/components/connection-form/fields/proxy.tsx b/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
index 7924309..9d1cadf 100644
--- a/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
@@ -61,7 +61,7 @@
label={<S.Label>Proxy URL</S.Label>}
subLabel={<S.LabelDescription>Add a proxy if you cannot access {name} directly.</S.LabelDescription>}
>
- <InputGroup placeholder="e.g http://proxy.localhost:8080" value={value} onChange={handleChange} />
+ <InputGroup placeholder="e.g. http://proxy.localhost:8080" value={value} onChange={handleChange} />
</FormGroup>
);
};
diff --git a/config-ui/src/plugins/components/transformation-select/index.tsx b/config-ui/src/plugins/components/transformation-select/index.tsx
index 95c1913..67d0c3c 100644
--- a/config-ui/src/plugins/components/transformation-select/index.tsx
+++ b/config-ui/src/plugins/components/transformation-select/index.tsx
@@ -16,7 +16,7 @@
*
*/
-import { useState, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import { Button, Intent } from '@blueprintjs/core';
import { Dialog, PageLoading, Table, IconButton } from '@/components';
@@ -28,19 +28,35 @@
interface Props {
plugin: string;
- // use for add or edit transformation directly
- startStepOption?: { type: 'add' | 'edit'; id?: ID };
connectionId: ID;
scopeId: ID;
+ transformationId?: ID;
+ transformationType: MixConnection['transformationType'];
onCancel: () => void;
onSubmit: (tid: ID) => void;
}
-export const TransformationSelect = ({ plugin, startStepOption, connectionId, scopeId, onCancel, onSubmit }: Props) => {
- const [step, setStep] = useState(startStepOption ? 2 : 1);
- const [type, setType] = useState<'add' | 'edit'>(startStepOption?.type ?? 'add');
- const [selectedId, setSelectedId] = useState<ID>(startStepOption?.id ?? '');
- const [updatedId, setUpdatedId] = useState<ID>(startStepOption?.id ?? '');
+export const TransformationSelect = ({
+ plugin,
+ connectionId,
+ scopeId,
+ transformationId,
+ transformationType,
+ onCancel,
+ onSubmit,
+}: Props) => {
+ const [step, setStep] = useState(1);
+ const [type, setType] = useState<'add' | 'edit'>('add');
+ const [selectedId, setSelectedId] = useState<ID>();
+ const [updatedId, setUpdatedId] = useState<ID>();
+
+ useEffect(() => setSelectedId(transformationId), [transformationId]);
+
+ useEffect(() => {
+ setStep(transformationType === 'for-scope' ? 2 : 1);
+ setType(transformationType === 'for-scope' && transformationId ? 'edit' : 'add');
+ setUpdatedId(transformationType === 'for-scope' && transformationId ? transformationId : undefined);
+ }, [transformationId, transformationType]);
const { ready, data } = useRefreshData(() => API.getTransformations(plugin, connectionId), [step]);
@@ -58,7 +74,6 @@
const handleNewTransformation = () => {
setStep(2);
setType('add');
- setSelectedId('');
};
const handleEditTransformation = (id: ID) => {
@@ -67,15 +82,14 @@
setUpdatedId(id);
};
- const handleReset = () => {
+ const handleReset = (tr?: any) => {
+ if (transformationType === 'for-scope') {
+ return tr ? onSubmit(tr.id) : onCancel();
+ }
setStep(1);
setUpdatedId('');
};
- const handleResetWithStartStepOption = (tr?: any) => {
- tr ? onSubmit(tr.id) : onCancel();
- };
-
const handleSubmit = () => !!selectedId && onSubmit(selectedId);
return (
@@ -123,7 +137,7 @@
connectionId={connectionId}
scopeId={scopeId}
id={updatedId}
- onCancel={startStepOption ? handleResetWithStartStepOption : handleReset}
+ onCancel={handleReset}
/>
)}
</Dialog>
diff --git a/config-ui/src/plugins/components/transformation/index.tsx b/config-ui/src/plugins/components/transformation/index.tsx
index 535004c..e1417eb 100644
--- a/config-ui/src/plugins/components/transformation/index.tsx
+++ b/config-ui/src/plugins/components/transformation/index.tsx
@@ -51,9 +51,12 @@
}: Props) => {
const [selected, setSelected] = useState<Record<string, ID[]>>({});
const [connection, setConnection] = useState<MixConnection>();
- const [startStepOption, setStartStepOption] = useState<{ type: 'add' | 'edit'; id?: ID }>();
+ const [tid, setTid] = useState<ID>();
- const handleCancel = () => setConnection(undefined);
+ const handleCancel = () => {
+ setConnection(undefined);
+ setTid(undefined);
+ };
const handleSubmit = async (tid: ID, connection: MixConnection, connections: MixConnection[]) => {
const { unique, plugin, connectionId } = connection;
@@ -106,10 +109,7 @@
intent={Intent.PRIMARY}
icon="annotation"
disabled={!selected[cs.unique] || !selected[cs.unique].length}
- onClick={() => {
- setStartStepOption(undefined);
- setConnection(cs);
- }}
+ onClick={() => setConnection(cs)}
>
Select Transformation
</Button>
@@ -126,48 +126,18 @@
render: (val, row) => (
<div>
<span>{val ?? 'N/A'}</span>
- {cs.transformationType === 'for-connection' && (
- <IconButton
- icon="annotation"
- tooltip="Select Transformation"
- onClick={() => {
- setSelected({
- ...selected,
- [`${cs.unique}`]: [row[getPluginId(cs.plugin)]],
- });
- setStartStepOption(undefined);
- setConnection(cs);
- }}
- />
- )}
- {cs.transformationType === 'for-scope' &&
- (row['transformationRuleId'] ? (
- <IconButton
- icon="annotation"
- tooltip="Edit Transformation"
- onClick={() => {
- setSelected({
- ...selected,
- [`${cs.unique}`]: [row[getPluginId(cs.plugin)]],
- });
- setStartStepOption({ type: 'edit', id: row['transformationRuleId'] });
- setConnection(cs);
- }}
- />
- ) : (
- <IconButton
- icon="annotation"
- tooltip="Add Transformation"
- onClick={() => {
- setSelected({
- ...selected,
- [`${cs.unique}`]: [row[getPluginId(cs.plugin)]],
- });
- setStartStepOption({ type: 'add' });
- setConnection(cs);
- }}
- />
- ))}
+ <IconButton
+ icon="link"
+ tooltip="Link Transformation"
+ onClick={() => {
+ setSelected({
+ ...selected,
+ [`${cs.unique}`]: [row[getPluginId(cs.plugin)]],
+ });
+ setConnection(cs);
+ setTid(row.transformationRuleId);
+ }}
+ />
</div>
),
},
@@ -194,9 +164,10 @@
{connection && (
<TransformationSelect
plugin={connection.plugin}
- startStepOption={startStepOption}
connectionId={connection.connectionId}
scopeId={selected[connection.unique][0]}
+ transformationId={tid}
+ transformationType={connection.transformationType}
onCancel={handleCancel}
onSubmit={(tid) => handleSubmit(tid, connection, connections)}
/>
diff --git a/config-ui/src/plugins/config.ts b/config-ui/src/plugins/config.ts
index c6fcf6a..542e6c7 100644
--- a/config-ui/src/plugins/config.ts
+++ b/config-ui/src/plugins/config.ts
@@ -78,5 +78,8 @@
name: pluginName,
} as PluginConfigType;
}
- return pluginConfig;
+ return {
+ ...pluginConfig,
+ transformationType: pluginConfig.transformationType || (pluginConfig.transformation ? 'for-connection' : 'none'),
+ };
}
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 00e488e..cce550c 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -110,7 +110,7 @@
subLabel={
<S.LabelDescription>
Add one or more personal token(s) for authentication from you and your organization members. Multiple tokens
- (from different GitHub accounts, NOT from one account) can help speed up the data collection process.
+ (from different GitHub accounts, NOT from one account) can help speed up the data collection process.{' '}
<ExternalLink link="https://devlake.apache.org/docs/Configuration/GitHub/#auth-tokens">
Learn how to create a personal access token
</ExternalLink>
diff --git a/config-ui/src/plugins/register/github/transformation.tsx b/config-ui/src/plugins/register/github/transformation.tsx
index b879455..9686c37 100644
--- a/config-ui/src/plugins/register/github/transformation.tsx
+++ b/config-ui/src/plugins/register/github/transformation.tsx
@@ -230,7 +230,7 @@
</ExternalLink>
</p>
<div className="input">
- <p>The Job name that matches</p>
+ <p>The job name that matches</p>
<InputGroup
placeholder="(deploy|push-image)"
value={transformation.deploymentPattern ?? ''}
@@ -246,7 +246,7 @@
</p>
</div>
<div className="input">
- <p>The Job name that matches</p>
+ <p>The job name that matches</p>
<InputGroup
disabled={!transformation.deploymentPattern}
placeholder="production"
diff --git a/config-ui/src/plugins/register/gitlab/transformation.tsx b/config-ui/src/plugins/register/gitlab/transformation.tsx
index de631cb..254f85c 100644
--- a/config-ui/src/plugins/register/gitlab/transformation.tsx
+++ b/config-ui/src/plugins/register/gitlab/transformation.tsx
@@ -68,7 +68,7 @@
<ExternalLink link="https://docs.gitlab.com/ee/ci/jobs/">See it here</ExternalLink>
</p>
<div className="input">
- <p>The Job name that matches</p>
+ <p>The job name that matches</p>
<InputGroup
placeholder="(deploy|push-image)"
value={transformation.deploymentPattern}
@@ -84,7 +84,7 @@
</p>
</div>
<div className="input">
- <p>The Job name that matches</p>
+ <p>The job name that matches</p>
<InputGroup
disabled={!transformation.deploymentPattern}
placeholder="production"
