You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/02/23 06:34:52 UTC
[incubator-devlake] branch main updated: feat(config-ui): some content optimization (#4498)
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 cbad5da99 feat(config-ui): some content optimization (#4498)
cbad5da99 is described below
commit cbad5da99c64b606fa39edec6c15ae9f37e74ddc
Author: 青湛 <0x...@gmail.com>
AuthorDate: Thu Feb 23 14:34:48 2023 +0800
feat(config-ui): some content optimization (#4498)
* feat(config-ui): use icon-button replace button in connection
* fix(config-ui): filter no transformation plugin in transformation
* fix(config-ui): adjust the sort for tapd
* refactor(config-ui): remove component delete-button
* feat(config-ui): add a new component no-data
* refactor(config-ui): simplified style
---
.../src/components/action/delete-button/index.tsx | 56 -------------
config-ui/src/components/action/index.ts | 1 -
config-ui/src/components/index.ts | 1 +
.../styled.ts => components/no-data/index.tsx} | 43 ++++++----
config-ui/src/components/page-header/styled.ts | 3 -
config-ui/src/components/table/table.tsx | 18 ++---
config-ui/src/index.css | 3 +-
.../blueprint/create/components/workflow/styled.ts | 3 -
.../src/pages/blueprint/create/step-one/styled.ts | 2 -
config-ui/src/pages/blueprint/home/styled.ts | 2 +-
config-ui/src/pages/connection/list/connection.tsx | 6 +-
.../src/pages/pipeline/components/info/styled.ts | 3 -
.../src/pages/pipeline/components/tasks/styled.ts | 6 --
.../src/pages/project/detail/panel/blueprint.tsx | 30 +++----
.../project/detail/panel/incoming-webhooks.tsx | 58 +++++++------
.../src/pages/project/detail/panel/settings.tsx | 5 +-
config-ui/src/pages/project/detail/styled.ts | 40 +++------
config-ui/src/pages/project/home/index.tsx | 94 +++++++++++-----------
config-ui/src/pages/project/home/styled.ts | 25 +-----
config-ui/src/pages/transformation/home/styled.ts | 2 +-
.../components/connection-form/fields/endpoint.tsx | 2 +-
.../plugins/components/data-scope-list/styled.ts | 9 +--
config-ui/src/plugins/register/tapd/config.tsx | 2 +-
.../src/store/transformations/use-context-value.ts | 5 +-
24 files changed, 151 insertions(+), 268 deletions(-)
diff --git a/config-ui/src/components/action/delete-button/index.tsx b/config-ui/src/components/action/delete-button/index.tsx
deleted file mode 100644
index c6a2ea9bc..000000000
--- a/config-ui/src/components/action/delete-button/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import React, { useState } from 'react';
-import { Position } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
-
-import { Dialog } from '@/components';
-
-interface Props {
- children: JSX.Element;
- loading?: boolean;
- onDelete: () => void;
-}
-
-export const DeleteButton = ({ children, loading = false, onDelete }: Props) => {
- const [isOpen, setIsOpen] = useState(false);
-
- const handleDelete = () => {
- onDelete();
- setIsOpen(false);
- };
-
- return (
- <>
- <Tooltip2 position={Position.TOP} content="Delete">
- {React.cloneElement(children, {
- onClick: () => setIsOpen(true),
- })}
- </Tooltip2>
- <Dialog
- isOpen={isOpen}
- title="Are you sure you want to delete this data scope?"
- onCancel={() => setIsOpen(false)}
- okLoading={loading}
- okText="Confirm"
- onOk={handleDelete}
- />
- </>
- );
-};
diff --git a/config-ui/src/components/action/index.ts b/config-ui/src/components/action/index.ts
index 068e974c7..1c4b7ef13 100644
--- a/config-ui/src/components/action/index.ts
+++ b/config-ui/src/components/action/index.ts
@@ -16,6 +16,5 @@
*
*/
-export * from './delete-button';
export * from './external-link';
export * from './icon-button';
diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts
index cc8256d2c..3291883ae 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -28,3 +28,4 @@ export * from './card';
export * from './inspector';
export * from './action';
export * from './tooltip';
+export * from './no-data';
diff --git a/config-ui/src/pages/transformation/home/styled.ts b/config-ui/src/components/no-data/index.tsx
similarity index 62%
copy from config-ui/src/pages/transformation/home/styled.ts
copy to config-ui/src/components/no-data/index.tsx
index 8ed50e638..39fa744d7 100644
--- a/config-ui/src/pages/transformation/home/styled.ts
+++ b/config-ui/src/components/no-data/index.tsx
@@ -16,25 +16,38 @@
*
*/
-import { Colors } from '@blueprintjs/core';
+import React from 'react';
+
+import Img from '@/images/no-data.svg';
+import { Card } from '@/components';
+
import styled from 'styled-components';
-export const Wrapper = styled.div`
+const Wrapper = styled(Card)`
+ text-align: center;
+
+ img {
+ display: inline-block;
+ width: 120px;
+ height: 120px;
+ }
+
.action {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
+ margin-top: 24px;
}
`;
-export const DialogWrapper = styled.div`
- .warning {
- margin-top: 16px;
+interface Props {
+ text: React.ReactNode;
+ action?: React.ReactNode;
+}
- .bp4-icon {
- color: ${Colors.ORANGE3};
- margin-right: 4px;
- }
- }
-`;
+export const NoData = ({ text, action }: Props) => {
+ return (
+ <Wrapper>
+ <img src={Img} alt="" />
+ <p>{text}</p>
+ <div className="action">{action}</div>
+ </Wrapper>
+ );
+};
diff --git a/config-ui/src/components/page-header/styled.ts b/config-ui/src/components/page-header/styled.ts
index 9da865c16..375bffec8 100644
--- a/config-ui/src/components/page-header/styled.ts
+++ b/config-ui/src/components/page-header/styled.ts
@@ -30,9 +30,6 @@ export const Title = styled.div`
export const Content = styled.div``;
export const Breadcrumbs = styled.ul`
- margin: 0;
- padding: 0;
- list-style: none;
display: flex;
align-items: center;
`;
diff --git a/config-ui/src/components/table/table.tsx b/config-ui/src/components/table/table.tsx
index 71021e739..2ccc4ec64 100644
--- a/config-ui/src/components/table/table.tsx
+++ b/config-ui/src/components/table/table.tsx
@@ -19,8 +19,7 @@
import React from 'react';
import { Button, Intent } from '@blueprintjs/core';
-import NoData from '@/images/no-data.svg';
-import { Loading, Card } from '@/components';
+import { Loading, Card, NoData } from '@/components';
import { ColumnType } from './types';
import * as S from './styled';
@@ -48,17 +47,16 @@ export const Table = <T extends Record<string, any>>({ loading, columns, dataSou
</S.Loading>
</Card>
) : !dataSource.length ? (
- <Card>
- <S.NoData>
- <img src={NoData} alt="" />
- <p>{text ?? 'No Data'}</p>
- {onCreate && (
+ <NoData
+ text={text}
+ action={
+ onCreate && (
<Button intent={Intent.PRIMARY} icon="plus" onClick={onCreate}>
{btnText ?? 'Create'}
</Button>
- )}
- </S.NoData>
- </Card>
+ )
+ }
+ />
) : (
<Card style={{ padding: 0 }}>
<S.Table loading={loading ? 1 : 0}>
diff --git a/config-ui/src/index.css b/config-ui/src/index.css
index 5a47c905e..f99a3d633 100644
--- a/config-ui/src/index.css
+++ b/config-ui/src/index.css
@@ -46,6 +46,7 @@ h2 {
}
h3 {
+ margin-bottom: 8px;
font-size: 16px;
}
@@ -68,7 +69,7 @@ ul {
}
p {
- margin: 8px 0 16px;
+ margin: 8px 0;
font-size: 12px;
color: #94959f;
}
diff --git a/config-ui/src/pages/blueprint/create/components/workflow/styled.ts b/config-ui/src/pages/blueprint/create/components/workflow/styled.ts
index 883770b70..f99272fa4 100644
--- a/config-ui/src/pages/blueprint/create/components/workflow/styled.ts
+++ b/config-ui/src/pages/blueprint/create/components/workflow/styled.ts
@@ -21,9 +21,6 @@ import styled from 'styled-components';
export const List = styled.ul`
display: flex;
align-items: center;
- list-style: none;
- padding: 0;
- margin: 0;
`;
export const Item = styled.li<{ active?: boolean }>`
diff --git a/config-ui/src/pages/blueprint/create/step-one/styled.ts b/config-ui/src/pages/blueprint/create/step-one/styled.ts
index 28146a92e..b7219fc88 100644
--- a/config-ui/src/pages/blueprint/create/step-one/styled.ts
+++ b/config-ui/src/pages/blueprint/create/step-one/styled.ts
@@ -20,9 +20,7 @@ import styled from 'styled-components';
import { Colors } from '@blueprintjs/core';
export const ConnectionList = styled.ul`
- margin: 0;
padding: 12px;
- list-style: none;
li {
display: flex;
diff --git a/config-ui/src/pages/blueprint/home/styled.ts b/config-ui/src/pages/blueprint/home/styled.ts
index b03971d71..7406e280d 100644
--- a/config-ui/src/pages/blueprint/home/styled.ts
+++ b/config-ui/src/pages/blueprint/home/styled.ts
@@ -19,7 +19,7 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
- .action {
+ & > .action {
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/config-ui/src/pages/connection/list/connection.tsx b/config-ui/src/pages/connection/list/connection.tsx
index a32909612..8fa63bfe0 100644
--- a/config-ui/src/pages/connection/list/connection.tsx
+++ b/config-ui/src/pages/connection/list/connection.tsx
@@ -21,7 +21,7 @@ import { useHistory } from 'react-router-dom';
import { ButtonGroup, Button, Intent, Position } from '@blueprintjs/core';
import { Popover2 } from '@blueprintjs/popover2';
-import { Table, ColumnType } from '@/components';
+import { Table, ColumnType, IconButton } from '@/components';
import type { ConnectionItemType } from '@/store';
import { useConnection, ConnectionStatus } from '@/store';
import { operator } from '@/utils';
@@ -91,7 +91,7 @@ export const Connection = ({ plugin }: Props) => {
key: 'action',
render: (id) => (
<ButtonGroup>
- <Button minimal intent={Intent.PRIMARY} icon="edit" onClick={() => handleUpdate(id)} />
+ <IconButton icon="edit" tooltip="Edit" onClick={() => handleUpdate(id)} />
<Popover2
position={Position.TOP}
content={
@@ -109,7 +109,7 @@ export const Connection = ({ plugin }: Props) => {
</S.DeleteConfirm>
}
>
- <Button minimal intent={Intent.PRIMARY} icon="delete" />
+ <IconButton icon="delete" tooltip="Delete" />
</Popover2>
</ButtonGroup>
),
diff --git a/config-ui/src/pages/pipeline/components/info/styled.ts b/config-ui/src/pages/pipeline/components/info/styled.ts
index 6760c1f22..de9a3e7f3 100644
--- a/config-ui/src/pages/pipeline/components/info/styled.ts
+++ b/config-ui/src/pages/pipeline/components/info/styled.ts
@@ -23,9 +23,6 @@ import { Card } from '@/components';
export const Wrapper = styled(Card)`
ul {
- margin: 0;
- padding: 0;
- list-style: none;
display: flex;
align-items: center;
}
diff --git a/config-ui/src/pages/pipeline/components/tasks/styled.ts b/config-ui/src/pages/pipeline/components/tasks/styled.ts
index 1d1f7b3da..7dc8b8c19 100644
--- a/config-ui/src/pages/pipeline/components/tasks/styled.ts
+++ b/config-ui/src/pages/pipeline/components/tasks/styled.ts
@@ -34,9 +34,6 @@ export const Inner = styled.div`
`;
export const Header = styled.ul`
- padding: 0;
- margin: 0;
- list-style: none;
display: flex;
align-items: center;
@@ -75,9 +72,6 @@ export const Header = styled.ul`
`;
export const Tasks = styled.ul`
- padding: 0;
- margin: 0;
- list-style: none;
display: flex;
align-items: flex-start;
diff --git a/config-ui/src/pages/project/detail/panel/blueprint.tsx b/config-ui/src/pages/project/detail/panel/blueprint.tsx
index 1a45aaef9..0c99dcc5f 100644
--- a/config-ui/src/pages/project/detail/panel/blueprint.tsx
+++ b/config-ui/src/pages/project/detail/panel/blueprint.tsx
@@ -20,8 +20,7 @@ import React from 'react';
import { useHistory } from 'react-router-dom';
import { Button, Intent } from '@blueprintjs/core';
-import NoData from '@/images/no-data.svg';
-import { Card } from '@/components';
+import { NoData } from '@/components';
import { BlueprintDetail } from '@/pages';
import type { ProjectType } from '../types';
@@ -36,21 +35,16 @@ export const BlueprintPanel = ({ project }: Props) => {
const handleGoCreateBlueprint = () =>
history.push(`/projects/${window.encodeURIComponent(project.name)}/create-blueprint`);
- return !project.blueprint ? (
- <Card>
- <div className="blueprint">
- <div className="logo">
- <img src={NoData} alt="" />
- </div>
- <div className="desc">
- <p>Create a blueprint to collect data from data sources.</p>
- </div>
- <div className="action">
+ if (!project.blueprint) {
+ return (
+ <NoData
+ text="Create a blueprint to collect data from data sources."
+ action={
<Button intent={Intent.PRIMARY} icon="plus" text="Create a Blueprint" onClick={handleGoCreateBlueprint} />
- </div>
- </div>
- </Card>
- ) : (
- <BlueprintDetail id={project.blueprint.id} />
- );
+ }
+ />
+ );
+ }
+
+ return <BlueprintDetail id={project.blueprint.id} />;
};
diff --git a/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx b/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx
index d6425949a..0552989e1 100644
--- a/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx
+++ b/config-ui/src/pages/project/detail/panel/incoming-webhooks.tsx
@@ -19,8 +19,7 @@
import React, { useState, useMemo } from 'react';
import { Button, Intent } from '@blueprintjs/core';
-import NoData from '@/images/no-webhook.svg';
-import { Card } from '@/components';
+import { NoData } from '@/components';
import type { WebhookItemType } from '@/plugins/register/webook';
import { WebhookCreateDialog, WebhookSelectorDialog, WebHookConnection } from '@/plugins/register/webook';
@@ -50,32 +49,31 @@ export const IncomingWebhooksPanel = ({ project, saving, onSelectWebhook, onCrea
setType(undefined);
};
- return !webhookIds.length ? (
- <Card>
- <div className="webhook">
- <div className="logo">
- <img src={NoData} alt="" />
- </div>
- <div className="desc">
- <p>Push `incidents` or `deployments` from your tools by incoming webhooks.</p>
- </div>
- <div className="action">
- <Button intent={Intent.PRIMARY} icon="plus" text="Add a Webhook" onClick={() => setType('create')} />
- <span className="or">or</span>
- <Button
- outlined
- intent={Intent.PRIMARY}
- text="Select Existing Webhooks"
- onClick={() => setType('selectExist')}
- />
- </div>
- </div>
- {type === 'create' && <WebhookCreateDialog isOpen onCancel={handleCancel} onSubmitAfter={onCreateWebhook} />}
- {type === 'selectExist' && (
- <WebhookSelectorDialog isOpen saving={saving} onCancel={handleCancel} onSubmit={onSelectWebhook} />
- )}
- </Card>
- ) : (
- <WebHookConnection filterIds={webhookIds} onCreateAfter={onCreateWebhook} />
- );
+ if (!webhookIds.length) {
+ return (
+ <>
+ <NoData
+ text="Push `incidents` or `deployments` from your tools by incoming webhooks."
+ action={
+ <>
+ <Button intent={Intent.PRIMARY} icon="plus" text="Add a Webhook" onClick={() => setType('create')} />
+ <div style={{ margin: '8px 0' }}>or</div>
+ <Button
+ outlined
+ intent={Intent.PRIMARY}
+ text="Select Existing Webhooks"
+ onClick={() => setType('selectExist')}
+ />
+ </>
+ }
+ />
+ {type === 'create' && <WebhookCreateDialog isOpen onCancel={handleCancel} onSubmitAfter={onCreateWebhook} />}
+ {type === 'selectExist' && (
+ <WebhookSelectorDialog isOpen saving={saving} onCancel={handleCancel} onSubmit={onSelectWebhook} />
+ )}
+ </>
+ );
+ }
+
+ return <WebHookConnection filterIds={webhookIds} onCreateAfter={onCreateWebhook} />;
};
diff --git a/config-ui/src/pages/project/detail/panel/settings.tsx b/config-ui/src/pages/project/detail/panel/settings.tsx
index d52a4b3f1..daad295d0 100644
--- a/config-ui/src/pages/project/detail/panel/settings.tsx
+++ b/config-ui/src/pages/project/detail/panel/settings.tsx
@@ -22,6 +22,7 @@ import { InputGroup, Checkbox, ButtonGroup, Button, Intent } from '@blueprintjs/
import { Card } from '@/components';
import type { ProjectType } from '../types';
+import * as S from '../styled';
interface Props {
project: ProjectType;
@@ -43,7 +44,7 @@ export const SettingsPanel = ({ project, onUpdate }: Props) => {
return (
<Card>
- <div className="settings">
+ <S.Settings>
<div className="block">
<h3>Project Name *</h3>
<p>Edit your project name.</p>
@@ -60,7 +61,7 @@ export const SettingsPanel = ({ project, onUpdate }: Props) => {
<ButtonGroup>
<Button text="Save" intent={Intent.PRIMARY} onClick={handleSave} />
</ButtonGroup>
- </div>
+ </S.Settings>
</Card>
);
};
diff --git a/config-ui/src/pages/project/detail/styled.ts b/config-ui/src/pages/project/detail/styled.ts
index a872daf22..0620323ab 100644
--- a/config-ui/src/pages/project/detail/styled.ts
+++ b/config-ui/src/pages/project/detail/styled.ts
@@ -23,40 +23,18 @@ export const Wrapper = styled.div`
display: flex;
justify-content: center;
}
+`;
- .blueprint,
- .webhook {
- padding: 24px;
- text-align: center;
-
- .logo > img {
- display: inline-block;
- width: 120px;
- height: 120px;
- }
-
- .desc {
- margin: 20px 0;
- }
-
- .action > .or {
- display: block;
- margin: 8px 0;
- }
+export const Settings = styled.div`
+ .block + .block {
+ margin-top: 24px;
}
- .settings {
- h3 {
- margin: 0;
- padding: 0;
- }
-
- .block {
- margin-bottom: 16px;
- }
+ .bp4-control {
+ margin-bottom: 0;
+ }
- .bp4-input-group {
- width: 386px;
- }
+ .bp4-input-group {
+ width: 386px;
}
`;
diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
index 2941b8e3e..8135b36af 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -85,55 +85,53 @@ export const ProjectHomePage = () => {
) : null
}
>
- <S.Container>
- <Table
- loading={loading}
- columns={columns}
- dataSource={projects}
- noData={{
- text: 'Add new projects to see engineering metrics based on projects.',
- btnText: 'New Project',
- onCreate: handleShowDialog,
- }}
- />
- <Dialog
- isOpen={isOpen}
- title="Create a New Project"
- style={{
- top: -100,
- width: 820,
- }}
- okText="Save"
- okDisabled={!name}
- okLoading={operating}
- onCancel={handleHideDialog}
- onOk={onSave}
- >
- <S.DialogWrapper>
- <div className="block">
- <h3>Project Name *</h3>
- <p>Give your project a unique name.</p>
- <InputGroup placeholder="Your Project Name" value={name} onChange={(e) => setName(e.target.value)} />
+ <Table
+ loading={loading}
+ columns={columns}
+ dataSource={projects}
+ noData={{
+ text: 'Add new projects to see engineering metrics based on projects.',
+ btnText: 'New Project',
+ onCreate: handleShowDialog,
+ }}
+ />
+ <Dialog
+ isOpen={isOpen}
+ title="Create a New Project"
+ style={{
+ top: -100,
+ width: 820,
+ }}
+ okText="Save"
+ okDisabled={!name}
+ okLoading={operating}
+ onCancel={handleHideDialog}
+ onOk={onSave}
+ >
+ <S.DialogInner>
+ <div className="block">
+ <h3>Project Name *</h3>
+ <p>Give your project a unique name.</p>
+ <InputGroup placeholder="Your Project Name" value={name} onChange={(e) => setName(e.target.value)} />
+ </div>
+ <div className="block">
+ <h3>Project Settings</h3>
+ <div className="checkbox">
+ <Checkbox
+ label="Enable DORA Metrics"
+ checked={enableDora}
+ onChange={(e) => setEnableDora((e.target as HTMLInputElement).checked)}
+ />
+ <p>
+ <a href="https://devlake.apache.org/docs/UserManuals/DORA/" rel="noreferrer" target="_blank">
+ DORA metrics
+ </a>{' '}
+ <span>are four widely-adopted metrics for measuring software delivery performance.</span>
+ </p>
</div>
- <div className="block">
- <h3>Project Settings</h3>
- <div className="checkbox">
- <Checkbox
- label="Enable DORA Metrics"
- checked={enableDora}
- onChange={(e) => setEnableDora((e.target as HTMLInputElement).checked)}
- />
- <p>
- <a href="https://devlake.apache.org/docs/UserManuals/DORA/" rel="noreferrer" target="_blank">
- DORA metrics
- </a>{' '}
- <span>are four widely-adopted metrics for measuring software delivery performance.</span>
- </p>
- </div>
- </div>
- </S.DialogWrapper>
- </Dialog>
- </S.Container>
+ </div>
+ </S.DialogInner>
+ </Dialog>
</PageHeader>
);
};
diff --git a/config-ui/src/pages/project/home/styled.ts b/config-ui/src/pages/project/home/styled.ts
index b30e7905a..a0624cf09 100644
--- a/config-ui/src/pages/project/home/styled.ts
+++ b/config-ui/src/pages/project/home/styled.ts
@@ -18,25 +18,9 @@
import styled from 'styled-components';
-export const Container = styled.div`
- .card {
- text-align: center;
-
- img {
- display: inline-block;
- width: 120px;
- height: 120px;
- }
-
- .desc {
- margin: 24px 0;
- }
- }
-`;
-
-export const DialogWrapper = styled.div`
+export const DialogInner = styled.div`
.block + .block {
- margin-top: 16px;
+ margin-top: 24px;
}
.bp4-input-group {
@@ -51,9 +35,4 @@ export const DialogWrapper = styled.div`
margin: 0 0 0 16px;
}
}
-
- h3 {
- margin: 0;
- padding: 0;
- }
`;
diff --git a/config-ui/src/pages/transformation/home/styled.ts b/config-ui/src/pages/transformation/home/styled.ts
index 8ed50e638..32c534180 100644
--- a/config-ui/src/pages/transformation/home/styled.ts
+++ b/config-ui/src/pages/transformation/home/styled.ts
@@ -20,7 +20,7 @@ import { Colors } from '@blueprintjs/core';
import styled from 'styled-components';
export const Wrapper = styled.div`
- .action {
+ & > .action {
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx b/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
index ae5376bd4..1c76f09c3 100644
--- a/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
@@ -99,7 +99,7 @@ export const ConnectionEndpoint = ({
</Radio>
</RadioGroup>
{version === 'cloud' && (
- <p>
+ <p style={{ margin: 0 }}>
If you are using {name} Cloud, you do not need to enter the endpoint URL, which is
{multipleVersions.cloud}.
</p>
diff --git a/config-ui/src/plugins/components/data-scope-list/styled.ts b/config-ui/src/plugins/components/data-scope-list/styled.ts
index a71f1b730..2ab16088d 100644
--- a/config-ui/src/plugins/components/data-scope-list/styled.ts
+++ b/config-ui/src/plugins/components/data-scope-list/styled.ts
@@ -18,11 +18,7 @@
import styled from 'styled-components';
-export const ScopeList = styled.ul`
- list-style: none;
- margin: 0;
- padding: 0;
-`;
+export const ScopeList = styled.ul``;
export const ScopeItem = styled.li`
margin-bottom: 4px;
@@ -54,9 +50,6 @@ export const ScopeItemMap = styled(ScopeItem)`
}
& > ul {
- margin: 0;
- padding: 0;
- list-style: none;
padding-left: 24px;
margin-top: 4px;
diff --git a/config-ui/src/plugins/register/tapd/config.tsx b/config-ui/src/plugins/register/tapd/config.tsx
index e0e95dcce..d8418f176 100644
--- a/config-ui/src/plugins/register/tapd/config.tsx
+++ b/config-ui/src/plugins/register/tapd/config.tsx
@@ -30,7 +30,7 @@ export const TAPDConfig: PluginConfigType = {
name: 'TAPD',
isBeta: true,
icon: Icon,
- sort: 6,
+ sort: 100,
connection: {
docLink: 'https://devlake.apache.org/docs/Configuration/Tapd',
initialValues: {
diff --git a/config-ui/src/store/transformations/use-context-value.ts b/config-ui/src/store/transformations/use-context-value.ts
index 0a6911629..a448d5496 100644
--- a/config-ui/src/store/transformations/use-context-value.ts
+++ b/config-ui/src/store/transformations/use-context-value.ts
@@ -27,7 +27,10 @@ export const useContextValue = () => {
const [loading, setLoading] = useState(false);
const [transformations, setTransformations] = useState<TransformationItemType[]>([]);
- const allConnections = useMemo(() => PluginConfig.filter((p) => p.type === PluginType.Connection && !p.isBeta), []);
+ const allConnections = useMemo(
+ () => PluginConfig.filter((p) => p.type === PluginType.Connection && !p.isBeta && p.transformation),
+ [],
+ );
const getTransformation = async (plugin: string) => {
try {