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 2023/12/06 07:05:54 UTC
(incubator-devlake) branch refactor-6307 created (now 22e7a9565)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a change to branch refactor-6307
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
at 22e7a9565 refactor(config-ui): use new ui modal to replace old dialog component
This branch includes the following new commits:
new 22e7a9565 refactor(config-ui): use new ui modal to replace old dialog component
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: refactor(config-ui): use new ui modal to replace old dialog component
Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch refactor-6307
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 22e7a956543a8f07448ca00f1329e3b2b79d61df
Author: mintsweet <0x...@gmail.com>
AuthorDate: Wed Dec 6 15:05:36 2023 +0800
refactor(config-ui): use new ui modal to replace old dialog component
---
config-ui/src/components/dialog/index.tsx | 69 ----------------------
config-ui/src/components/dialog/styled.ts | 52 ----------------
config-ui/src/components/index.ts | 1 -
.../pages/blueprint/connection-detail/index.tsx | 20 +++----
.../components/add-connection-dialog/index.tsx | 7 ++-
.../detail/components/advanced-editor/index.tsx | 2 +-
.../detail/components/update-name-dialog/index.tsx | 15 ++---
.../components/update-policy-dialog/index.tsx | 17 +++---
.../src/pages/blueprint/detail/status-panel.tsx | 28 +++++----
config-ui/src/pages/blueprint/home/index.tsx | 25 ++++----
.../src/pages/project/detail/settings-panel.tsx | 23 ++++----
.../src/pages/project/detail/webhooks-panel.tsx | 4 +-
config-ui/src/pages/project/home/index.tsx | 25 ++++----
.../components/data-scope-remote/search-local.tsx | 13 ++--
.../components/scope-config-select/index.tsx | 8 +--
.../jira/transformation-fields/cross-domain.tsx | 8 +--
.../jira/transformation-fields/dev-panel.tsx | 23 ++++----
.../register/webhook/components/create-dialog.tsx | 22 ++++---
.../register/webhook/components/delete-dialog.tsx | 14 +++--
.../register/webhook/components/edit-dialog.tsx | 18 +++---
.../webhook/components/selector-dialog.tsx | 24 ++++----
.../register/webhook/components/view-dialog.tsx | 30 ++++++----
.../src/plugins/register/webhook/connection.tsx | 4 +-
config-ui/src/routes/api-keys/api-keys.tsx | 42 ++++++-------
config-ui/src/routes/pipeline/components/table.tsx | 8 +--
25 files changed, 205 insertions(+), 297 deletions(-)
diff --git a/config-ui/src/components/dialog/index.tsx b/config-ui/src/components/dialog/index.tsx
deleted file mode 100644
index 5c91b44ac..000000000
--- a/config-ui/src/components/dialog/index.tsx
+++ /dev/null
@@ -1,69 +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 { Button, Icon, Intent, Classes } from '@blueprintjs/core';
-
-import * as S from './styled';
-
-interface Props {
- isOpen: boolean;
- children?: React.ReactNode;
- style?: React.CSSProperties;
- title?: React.ReactNode;
- footer?: React.ReactNode | null;
- cancelText?: string;
- okText?: string;
- okDisabled?: boolean;
- okLoading?: boolean;
- onCancel?: () => void;
- onOk?: () => void;
-}
-
-export const Dialog = ({
- isOpen,
- children,
- style,
- title,
- footer,
- cancelText = 'Cancel',
- okText = 'OK',
- okDisabled,
- okLoading,
- onCancel,
- onOk,
-}: Props) => {
- return (
- <S.Container isOpen={isOpen} style={style} canEscapeKeyClose onClose={onCancel}>
- {title && (
- <S.Header className={Classes.DIALOG_HEADER}>
- <h2>{title}</h2>
- <Icon icon="cross" onClick={onCancel} />
- </S.Header>
- )}
- <S.Body className={Classes.DIALOG_BODY}>{children}</S.Body>
- {footer !== null && (
- <S.Footer className={Classes.DIALOG_FOOTER}>
- <div className={Classes.DIALOG_FOOTER_ACTIONS}>
- <Button outlined intent={Intent.PRIMARY} onClick={onCancel} text={cancelText} />
- <Button disabled={okDisabled} loading={okLoading} intent={Intent.PRIMARY} text={okText} onClick={onOk} />
- </div>
- </S.Footer>
- )}
- </S.Container>
- );
-};
diff --git a/config-ui/src/components/dialog/styled.ts b/config-ui/src/components/dialog/styled.ts
deleted file mode 100644
index 500401556..000000000
--- a/config-ui/src/components/dialog/styled.ts
+++ /dev/null
@@ -1,52 +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 styled from 'styled-components';
-import { Dialog } from '@blueprintjs/core';
-
-export const Container = styled(Dialog)`
- position: relative;
- background-color: #fff;
-`;
-
-export const Header = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 0 20px;
- padding: 12px 0;
- border-bottom: 1px solid #dbe4fd;
- box-shadow: none;
-
- h2 {
- margin: 0;
- padding: 0;
- font-size: 16px;
- font-weight: 600;
- }
-
- & > span {
- cursor: pointer;
- }
-`;
-
-export const Body = styled.div`
- margin: 24px;
-`;
-
-export const Footer = styled.div``;
diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts
index ee649f388..50591ecde 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -18,7 +18,6 @@
export * from './action';
export * from './buttons';
-export * from './dialog';
export * from './divider';
export * from './form';
export * from './inspector';
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index ce9329a30..50de74484 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -18,12 +18,12 @@
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
-import { Table } from 'antd';
+import { Table, Modal } from 'antd';
import { Button, Intent, Position } from '@blueprintjs/core';
import { Popover2 } from '@blueprintjs/popover2';
import API from '@/api';
-import { PageLoading, PageHeader, ExternalLink, Message, Buttons, Dialog } from '@/components';
+import { PageLoading, PageHeader, ExternalLink, Message, Buttons } from '@/components';
import { useRefreshData, useTips } from '@/hooks';
import { DataScopeSelect, getPluginConfig, getPluginScopeId } from '@/plugins';
import { operator } from '@/utils';
@@ -34,7 +34,7 @@ import * as S from './styled';
export const BlueprintConnectionDetailPage = () => {
const [version, setVersion] = useState(1);
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
const [operating, setOperating] = useState(false);
const { pname, bid, unique } = useParams() as { pname?: string; bid?: string; unique: string };
@@ -91,8 +91,8 @@ export const BlueprintConnectionDetailPage = () => {
const { blueprint, connection, scopes } = data;
- const handleShowDataScope = () => setIsOpen(true);
- const handleHideDataScope = () => setIsOpen(false);
+ const handleShowDataScope = () => setOpen(true);
+ const handleHideDataScope = () => setOpen(false);
const handleRunBP = async (skipCollectors: boolean) => {
const [success] = await operator(() => API.blueprint.trigger(blueprint.id, { skipCollectors, fullSync: false }), {
@@ -234,13 +234,7 @@ export const BlueprintConnectionDetailPage = () => {
]}
dataSource={scopes}
/>
- <Dialog
- isOpen={isOpen}
- title="Manage Data Scope"
- footer={null}
- style={{ width: 820 }}
- onCancel={handleHideDataScope}
- >
+ <Modal open={open} width={820} centered title="Manage Data Scope" footer={null} onCancel={handleHideDataScope}>
<DataScopeSelect
plugin={connection.plugin}
connectionId={connection.id}
@@ -249,7 +243,7 @@ export const BlueprintConnectionDetailPage = () => {
onCancel={handleHideDataScope}
onSubmit={handleChangeDataScope}
/>
- </Dialog>
+ </Modal>
</PageHeader>
);
};
diff --git a/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx b/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
index cc882ab97..d82985b0f 100644
--- a/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
@@ -17,10 +17,11 @@
*/
import { useState, useMemo } from 'react';
+import { Modal } from 'antd';
import { Button, Intent } from '@blueprintjs/core';
import { useAppSelector } from '@/app/hook';
-import { Dialog, FormItem, Selector, Buttons } from '@/components';
+import { FormItem, Selector, Buttons } from '@/components';
import { selectAllConnections } from '@/features';
import { DataScopeSelect } from '@/plugins';
import { IConnection } from '@/types';
@@ -52,7 +53,7 @@ export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props
};
return (
- <Dialog style={{ width: 820 }} isOpen title={`Add a Connection - Step ${step}`} footer={null} onCancel={onCancel}>
+ <Modal open width={820} centered title={`Add a Connection - Step ${step}`} footer={null} onCancel={onCancel}>
{step === 1 && (
<FormItem
label="Data Connections"
@@ -82,6 +83,6 @@ export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props
onSubmit={handleSubmit}
/>
)}
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx b/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx
index fa46f2698..efebee958 100644
--- a/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx
@@ -82,7 +82,7 @@ export const AdvancedEditor = ({ value, onChange }: Props) => {
))}
</Menu>
}
- renderTarget={({ isOpen, ref, ...targetProps }) => (
+ renderTarget={({ ref, ...targetProps }) => (
<Button {...targetProps} ref={ref} small text="Load Templates" rightIcon="caret-down" />
)}
/>
diff --git a/config-ui/src/pages/blueprint/detail/components/update-name-dialog/index.tsx b/config-ui/src/pages/blueprint/detail/components/update-name-dialog/index.tsx
index ee14a1683..a9c69dc7b 100644
--- a/config-ui/src/pages/blueprint/detail/components/update-name-dialog/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/update-name-dialog/index.tsx
@@ -17,10 +17,9 @@
*/
import { useState, useEffect } from 'react';
+import { Modal } from 'antd';
import { InputGroup } from '@blueprintjs/core';
-import { Dialog } from '@/components';
-
interface Props {
name: string;
operating: boolean;
@@ -36,18 +35,20 @@ export const UpdateNameDialog = ({ operating, onCancel, onSubmit, ...props }: Pr
}, [props.name]);
return (
- <Dialog
- isOpen
+ <Modal
+ open
title="Change Blueprint Name"
okText="Save"
- okDisabled={!name || name === props.name}
- okLoading={operating}
+ okButtonProps={{
+ disabled: !name || name === props.name,
+ loading: operating,
+ }}
onCancel={onCancel}
onOk={() => onSubmit(name)}
>
<h3>Blueprint Name</h3>
<p>Give your Blueprint a unique name to help you identify it in the future.</p>
<InputGroup value={name} onChange={(e) => setName(e.target.value)} />
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/pages/blueprint/detail/components/update-policy-dialog/index.tsx b/config-ui/src/pages/blueprint/detail/components/update-policy-dialog/index.tsx
index 852eacac3..23cfac1ef 100644
--- a/config-ui/src/pages/blueprint/detail/components/update-policy-dialog/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/update-policy-dialog/index.tsx
@@ -17,8 +17,8 @@
*/
import { useState, useEffect } from 'react';
+import { Modal } from 'antd';
-import { Dialog } from '@/components';
import { IBlueprint, IBPMode } from '@/types';
import { SyncPolicy } from '../sync-policy';
@@ -57,14 +57,15 @@ export const UpdatePolicyDialog = ({ blueprint, operating, onCancel, onSubmit, .
};
return (
- <Dialog
- isOpen
+ <Modal
+ open
+ width={820}
+ centered
title="Set Sync Policy"
- style={{
- width: 820,
- }}
okText="Save"
- okLoading={operating}
+ okButtonProps={{
+ loading: operating,
+ }}
onCancel={onCancel}
onOk={handleSubmit}
>
@@ -79,6 +80,6 @@ export const UpdatePolicyDialog = ({ blueprint, operating, onCancel, onSubmit, .
onChangeSkipOnFail={setSkipOnFail}
onChangeTimeAfter={setTimeAfter}
/>
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/pages/blueprint/detail/status-panel.tsx b/config-ui/src/pages/blueprint/detail/status-panel.tsx
index 73d9932b0..e4bc20f3d 100644
--- a/config-ui/src/pages/blueprint/detail/status-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/status-panel.tsx
@@ -18,12 +18,12 @@
import { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
-import { Card } from 'antd';
+import { Card, Modal } from 'antd';
import { Button, Switch, Intent, Position, Popover, Menu, MenuItem } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import API from '@/api';
-import { IconButton, Dialog, Message } from '@/components';
+import { IconButton, Message } from '@/components';
import { getCron } from '@/config';
import { useAutoRefresh } from '@/hooks';
import { PipelineInfo, PipelineTasks, PipelineTable } from '@/routes/pipeline';
@@ -207,12 +207,15 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
{/* </PipelineContextProvider> */}
{type === 'delete' && (
- <Dialog
- isOpen
- style={{ width: 820 }}
+ <Modal
+ open
+ width={820}
+ centered
title="Are you sure you want to delete this Blueprint?"
okText="Confirm"
- okLoading={operating}
+ okButtonProps={{
+ loading: operating,
+ }}
onCancel={handleResetType}
onOk={handleDelete}
>
@@ -221,19 +224,22 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
Blueprint. If you would like to delete the historical data of Data Scopes, please visit the Connection
page and do so."
/>
- </Dialog>
+ </Modal>
)}
{type === 'fullSync' && (
- <Dialog
- isOpen
+ <Modal
+ open
+ centered
okText="Run Now"
- okLoading={operating}
+ okButtonProps={{
+ loading: operating,
+ }}
onCancel={handleResetType}
onOk={() => handleRun({ fullSync: true })}
>
<Message content="This operation may take a long time as it will empty all of your existing data and re-collect it." />
- </Dialog>
+ </Modal>
)}
</S.StatusPanel>
);
diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
index 0893622a4..bbfc4389a 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -18,12 +18,12 @@
import { useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
-import { Table } from 'antd';
+import { Table, Modal } from 'antd';
import { ButtonGroup, Button, Tag, Intent, FormGroup, InputGroup, RadioGroup, Radio } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, IconButton, TextTooltip, Dialog } from '@/components';
+import { PageHeader, IconButton, TextTooltip } from '@/components';
import { getCronOptions, cronPresets, getCron } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -37,7 +37,7 @@ export const BlueprintHomePage = () => {
const [type, setType] = useState('all');
const [page, setPage] = useState(1);
const [pageSize] = useState(20);
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
const [name, setName] = useState('');
const [mode, setMode] = useState(IBPMode.NORMAL);
const [saving, setSaving] = useState(false);
@@ -50,11 +50,11 @@ export const BlueprintHomePage = () => {
const [options, presets] = useMemo(() => [getCronOptions(), cronPresets.map((preset) => preset.config)], []);
const [dataSource, total] = useMemo(() => [data?.blueprints ?? [], data?.count ?? 0], [data]);
- const handleShowDialog = () => setIsOpen(true);
+ const handleShowDialog = () => setOpen(true);
const handleHideDialog = () => {
setName('');
setMode(IBPMode.NORMAL);
- setIsOpen(false);
+ setOpen(false);
};
const handleCreate = async () => {
@@ -210,13 +210,16 @@ export const BlueprintHomePage = () => {
}}
/>
</S.Wrapper>
- <Dialog
- style={{ width: 820 }}
- isOpen={isOpen}
+ <Modal
+ open={open}
+ width={820}
+ centered
title="Create a New Blueprint"
okText="Save"
- okDisabled={!name}
- okLoading={saving}
+ okButtonProps={{
+ disabled: !name,
+ loading: saving,
+ }}
onOk={handleCreate}
onCancel={handleHideDialog}
>
@@ -257,7 +260,7 @@ export const BlueprintHomePage = () => {
</RadioGroup>
</FormGroup>
</S.DialogWrapper>
- </Dialog>
+ </Modal>
</PageHeader>
);
};
diff --git a/config-ui/src/pages/project/detail/settings-panel.tsx b/config-ui/src/pages/project/detail/settings-panel.tsx
index 88a207cc4..8b9d0ca3e 100644
--- a/config-ui/src/pages/project/detail/settings-panel.tsx
+++ b/config-ui/src/pages/project/detail/settings-panel.tsx
@@ -18,11 +18,11 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { Card, message } from 'antd';
+import { Card, Modal, message } from 'antd';
import { InputGroup, Checkbox, Button, Icon, Intent } from '@blueprintjs/core';
import API from '@/api';
-import { FormItem, Buttons, Dialog } from '@/components';
+import { FormItem, Buttons } from '@/components';
import { IProject } from '@/types';
import { operator } from '@/utils';
@@ -39,7 +39,7 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
const [name, setName] = useState('');
const [enableDora, setEnableDora] = useState(false);
const [operating, setOperating] = useState(false);
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
const navigate = useNavigate();
@@ -81,11 +81,11 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
};
const handleShowDeleteDialog = () => {
- setIsOpen(true);
+ setOpen(true);
};
const handleHideDeleteDialog = () => {
- setIsOpen(false);
+ setOpen(false);
};
const handleDelete = async () => {
@@ -119,12 +119,15 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
<Buttons position="bottom" align="center">
<Button intent={Intent.DANGER} text="Delete Project" onClick={handleShowDeleteDialog} />
</Buttons>
- <Dialog
- isOpen={isOpen}
- style={{ width: 820 }}
+ <Modal
+ open={open}
+ width={820}
+ centered
title="Are you sure you want to delete this Project?"
okText="Confirm"
- okLoading={operating}
+ okButtonProps={{
+ loading: operating,
+ }}
onCancel={handleHideDeleteDialog}
onOk={handleDelete}
>
@@ -135,7 +138,7 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
this Connection.
</span>
</S.DialogBody>
- </Dialog>
+ </Modal>
</>
);
};
diff --git a/config-ui/src/pages/project/detail/webhooks-panel.tsx b/config-ui/src/pages/project/detail/webhooks-panel.tsx
index 18ca39a83..741ae941e 100644
--- a/config-ui/src/pages/project/detail/webhooks-panel.tsx
+++ b/config-ui/src/pages/project/detail/webhooks-panel.tsx
@@ -146,9 +146,9 @@ export const WebhooksPanel = ({ project, onRefresh }: Props) => {
</>
}
/>
- {type === 'create' && <WebhookCreateDialog isOpen onCancel={handleCancel} onSubmitAfter={handleCreate} />}
+ {type === 'create' && <WebhookCreateDialog open onCancel={handleCancel} onSubmitAfter={handleCreate} />}
{type === 'selectExist' && (
- <WebhookSelectorDialog isOpen saving={operating} onCancel={handleCancel} onSubmit={handleSelect} />
+ <WebhookSelectorDialog open saving={operating} onCancel={handleCancel} onSubmit={handleSelect} />
)}
</>
) : (
diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
index ed07d83c2..74d4f651a 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -18,12 +18,12 @@
import { useState, useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
-import { Table, message } from 'antd';
+import { Table, Modal, message } from 'antd';
import { Button, InputGroup, Checkbox, Intent, FormGroup } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, Dialog, ExternalLink, IconButton } from '@/components';
+import { PageHeader, ExternalLink, IconButton } from '@/components';
import { getCron, cronPresets } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -40,7 +40,7 @@ export const ProjectHomePage = () => {
const [version, setVersion] = useState(1);
const [page, setPage] = useState(1);
const [pageSize] = useState(20);
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
const [name, setName] = useState('');
const [enableDora, setEnableDora] = useState(true);
const [saving, setSaving] = useState(false);
@@ -68,9 +68,9 @@ export const ProjectHomePage = () => {
[data],
);
- const handleShowDialog = () => setIsOpen(true);
+ const handleShowDialog = () => setOpen(true);
const handleHideDialog = () => {
- setIsOpen(false);
+ setOpen(false);
setName('');
setEnableDora(true);
};
@@ -203,13 +203,16 @@ export const ProjectHomePage = () => {
onChange: setPage,
}}
/>
- <Dialog
- isOpen={isOpen}
+ <Modal
+ open={open}
+ width={820}
+ centered
title="Create a New Project"
- style={{ width: 820 }}
okText="Save"
- okDisabled={!name}
- okLoading={saving}
+ okButtonProps={{
+ disabled: !name,
+ loading: saving,
+ }}
onOk={handleCreate}
onCancel={handleHideDialog}
>
@@ -247,7 +250,7 @@ export const ProjectHomePage = () => {
/>
</FormGroup>
</S.DialogWrapper>
- </Dialog>
+ </Modal>
</PageHeader>
);
};
diff --git a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
index d87521931..aff5210d9 100644
--- a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
+++ b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
@@ -17,13 +17,14 @@
*/
import { useState, useEffect, useMemo } from 'react';
+import { Modal } from 'antd';
import { Button, InputGroup, Icon, Intent } from '@blueprintjs/core';
import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
import { MillerColumnsSelect } from 'miller-columns-select';
import { useDebounce } from 'ahooks';
import API from '@/api';
-import { FormItem, MultiSelector, Loading, Dialog, Message } from '@/components';
+import { FormItem, MultiSelector, Loading, Message } from '@/components';
import { IPluginConfig } from '@/types';
import * as T from './types';
@@ -53,7 +54,7 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
nextTokenMap: {},
});
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
const [status, setStatus] = useState('init');
const [query, setQuery] = useState('');
@@ -142,7 +143,7 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
}, [miller]);
const handleLoadAllScopes = async () => {
- setIsOpen(false);
+ setOpen(false);
setStatus('loading');
if (!miller.loadedIds.includes('root')) {
@@ -209,7 +210,7 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
disabled={!miller.items.length}
intent={Intent.PRIMARY}
text="Load all scopes to search by keywords"
- onClick={() => setIsOpen(true)}
+ onClick={() => setOpen(true)}
/>
</S.JobLoad>
)}
@@ -241,9 +242,9 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
expandedIds={miller.expandedIds}
/>
</FormItem>
- <Dialog isOpen={isOpen} okText="Load" onCancel={() => setIsOpen(false)} onOk={handleLoadAllScopes}>
+ <Modal open={open} okText="Load" onCancel={() => setOpen(false)} onOk={handleLoadAllScopes}>
<Message content={`This operation may take a long time, as it iterates through all the ${config.title}.`} />
- </Dialog>
+ </Modal>
</S.Wrapper>
);
};
diff --git a/config-ui/src/plugins/components/scope-config-select/index.tsx b/config-ui/src/plugins/components/scope-config-select/index.tsx
index e618d77cb..6841e279a 100644
--- a/config-ui/src/plugins/components/scope-config-select/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-select/index.tsx
@@ -39,7 +39,7 @@ interface Props {
export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCancel, onSubmit }: Props) => {
const [version, setVersion] = useState(1);
const [trId, setTrId] = useState<ID>();
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
const [updatedId, setUpdatedId] = useState<ID>();
const { ready, data } = useRefreshData(() => API.scopeConfig.list(plugin, connectionId), [version]);
@@ -54,11 +54,11 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
}, [scopeConfigId]);
const handleShowDialog = () => {
- setIsOpen(true);
+ setOpen(true);
};
const handleHideDialog = () => {
- setIsOpen(false);
+ setOpen(false);
setUpdatedId(undefined);
};
@@ -114,7 +114,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
</Button>
</Buttons>
<Modal
- open={isOpen}
+ open={open}
width={960}
centered
footer={null}
diff --git a/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
index 31160fa7b..bf9f8a6a4 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
+++ b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
@@ -36,7 +36,7 @@ interface Props {
export const CrossDomain = ({ connectionId, transformation, setTransformation }: Props) => {
const [radio, setRadio] = useState<'remote-link' | 'dev-panel'>('remote-link');
const [showTip, setShowTip] = useState(false);
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
useEffect(() => {
if (transformation.applicationType) {
@@ -102,14 +102,14 @@ export const CrossDomain = ({ connectionId, transformation, setTransformation }:
)}
<Button
text={!transformation.applicationType ? 'Configure' : 'Edit Configuration'}
- onClick={() => setIsOpen(true)}
+ onClick={() => setOpen(true)}
/>
<DevPanel
connectionId={connectionId}
transformation={transformation}
setTransformation={setTransformation}
- isOpen={isOpen}
- onCancel={() => setIsOpen(false)}
+ open={open}
+ onCancel={() => setOpen(false)}
/>
</>
)}
diff --git a/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx b/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
index 2231311f6..58e9371b8 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
+++ b/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
@@ -17,11 +17,11 @@
*/
import { useEffect, useState } from 'react';
-import { message } from 'antd';
+import { Modal, message } from 'antd';
import { InputGroup, Button, RadioGroup, Radio, Icon, Collapse } from '@blueprintjs/core';
import API from '@/api';
-import { Dialog, FormItem } from '@/components';
+import { FormItem } from '@/components';
import JiraIssueTipsImg from '@/images/jira-issue-tips.png';
import { operator } from '@/utils';
@@ -31,11 +31,11 @@ interface Props {
connectionId: ID;
transformation: any;
setTransformation: React.Dispatch<React.SetStateAction<any>>;
- isOpen: boolean;
+ open: boolean;
onCancel: () => void;
}
-export const DevPanel = ({ connectionId, transformation, setTransformation, isOpen, onCancel }: Props) => {
+export const DevPanel = ({ connectionId, transformation, setTransformation, open, onCancel }: Props) => {
const [step, setStep] = useState(1);
const [issueKey, setIssueKey] = useState('');
const [searching, setSearching] = useState(false);
@@ -126,13 +126,16 @@ export const DevPanel = ({ connectionId, transformation, setTransformation, isOp
};
return (
- <Dialog
- style={{ width: 820 }}
- isOpen={isOpen}
+ <Modal
+ open={open}
+ width={820}
+ centered
title="Configure the `Application Type` and `Commit Pattern` by sending request(s) to Jira."
okText={step === 1 ? 'Next' : 'Save'}
- okDisabled={(step === 1 && !applicationType) || (step === 2 && (!pattern || !regex))}
- okLoading={operating}
+ okButtonProps={{
+ disabled: (step === 1 && !applicationType) || (step === 2 && (!pattern || !regex)),
+ loading: operating,
+ }}
cancelText={step === 2 ? 'Prev' : 'Cancel'}
onOk={handleSubmit}
onCancel={handleCancel}
@@ -208,6 +211,6 @@ export const DevPanel = ({ connectionId, transformation, setTransformation, isOp
</>
)}
</S.DialogBody>
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/plugins/register/webhook/components/create-dialog.tsx b/config-ui/src/plugins/register/webhook/components/create-dialog.tsx
index 3e2dea2c8..c119150aa 100644
--- a/config-ui/src/plugins/register/webhook/components/create-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/create-dialog.tsx
@@ -17,22 +17,23 @@
*/
import { useState, useMemo } from 'react';
+import { Modal } from 'antd';
import { InputGroup, Icon } from '@blueprintjs/core';
import { useAppDispatch } from '@/app/hook';
-import { Dialog, FormItem, CopyText, ExternalLink } from '@/components';
+import { FormItem, CopyText, ExternalLink } from '@/components';
import { addWebhook } from '@/features';
import { operator } from '@/utils';
import * as S from '../styled';
interface Props {
- isOpen: boolean;
+ open: boolean;
onCancel: () => void;
onSubmitAfter?: (id: ID) => void;
}
-export const CreateDialog = ({ isOpen, onCancel, onSubmitAfter }: Props) => {
+export const CreateDialog = ({ open, onCancel, onSubmitAfter }: Props) => {
const [operating, setOperating] = useState(false);
const [step, setStep] = useState(1);
const [name, setName] = useState('');
@@ -100,14 +101,17 @@ export const CreateDialog = ({ isOpen, onCancel, onSubmitAfter }: Props) => {
};
return (
- <Dialog
- isOpen={isOpen}
+ <Modal
+ open={open}
+ width={820}
+ centered
title="Add a New Webhook"
- style={{ width: 820 }}
footer={step === 2 ? null : undefined}
okText={step === 1 ? 'Generate POST URL' : 'Done'}
- okDisabled={step === 1 && !name}
- okLoading={operating}
+ okButtonProps={{
+ disabled: step === 1 && !name,
+ loading: operating,
+ }}
onCancel={onCancel}
onOk={handleSubmit}
>
@@ -165,7 +169,7 @@ export const CreateDialog = ({ isOpen, onCancel, onSubmitAfter }: Props) => {
</FormItem>
</S.Wrapper>
)}
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/plugins/register/webhook/components/delete-dialog.tsx b/config-ui/src/plugins/register/webhook/components/delete-dialog.tsx
index a5f298f89..54b0abaa0 100644
--- a/config-ui/src/plugins/register/webhook/components/delete-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/delete-dialog.tsx
@@ -17,9 +17,10 @@
*/
import { useState } from 'react';
+import { Modal } from 'antd';
import { useAppDispatch } from '@/app/hook';
-import { Dialog, Message } from '@/components';
+import { Message } from '@/components';
import { removeWebhook } from '@/features';
import { operator } from '@/utils';
@@ -46,16 +47,17 @@ export const DeleteDialog = ({ initialId, onCancel, onSubmitAfter }: Props) => {
};
return (
- <Dialog
- isOpen
+ <Modal
+ open
title="Delete this Webhook?"
- // style={{ width: 600 }}
okText="Confirm"
- okLoading={operating}
+ okButtonProps={{
+ loading: operating,
+ }}
onCancel={onCancel}
onOk={handleSubmit}
>
<Message content="This Webhook cannot be recovered once it’s deleted." />
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/plugins/register/webhook/components/edit-dialog.tsx b/config-ui/src/plugins/register/webhook/components/edit-dialog.tsx
index 39e2ba3db..b5bb79f67 100644
--- a/config-ui/src/plugins/register/webhook/components/edit-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/edit-dialog.tsx
@@ -17,10 +17,11 @@
*/
import { useState, useEffect } from 'react';
+import { Modal } from 'antd';
import { InputGroup } from '@blueprintjs/core';
import { useAppDispatch, useAppSelector } from '@/app/hook';
-import { Dialog, FormItem } from '@/components';
+import { FormItem } from '@/components';
import { updateWebhook, selectWebhook } from '@/features';
import { operator } from '@/utils';
@@ -51,19 +52,22 @@ export const EditDialog = ({ initialId, onCancel }: Props) => {
};
return (
- <Dialog
- style={{ width: 820 }}
- isOpen
+ <Modal
+ open
+ width={820}
+ centered
title="Edit Webhook Name"
- okLoading={operating}
- okDisabled={!name}
okText="Save"
+ okButtonProps={{
+ disabled: !name,
+ loading: operating,
+ }}
onCancel={onCancel}
onOk={handleSubmit}
>
<FormItem label="Name" required>
<InputGroup value={name} onChange={(e) => setName(e.target.value)} />
</FormItem>
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx b/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
index 49f900eee..28db3a076 100644
--- a/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
@@ -17,23 +17,24 @@
*/
import { useState } from 'react';
+import { Modal } from 'antd';
import MillerColumnsSelect from 'miller-columns-select';
import { useAppSelector } from '@/app/hook';
-import { Dialog, FormItem, Loading } from '@/components';
+import { FormItem, Loading } from '@/components';
import { selectWebhooks } from '@/features';
import { IWebhook } from '@/types';
import * as S from '../styled';
interface Props {
- isOpen: boolean;
+ open: boolean;
saving: boolean;
onCancel: () => void;
onSubmit: (items: IWebhook[]) => void;
}
-export const SelectorDialog = ({ isOpen, saving, onCancel, onSubmit }: Props) => {
+export const SelectorDialog = ({ open, saving, onCancel, onSubmit }: Props) => {
const [selectedIds, setSelectedIds] = useState<ID[]>([]);
const webhooks = useAppSelector(selectWebhooks);
@@ -41,15 +42,16 @@ export const SelectorDialog = ({ isOpen, saving, onCancel, onSubmit }: Props) =>
const handleSubmit = () => onSubmit(webhooks.filter((it) => selectedIds.includes(it.id)));
return (
- <Dialog
- isOpen={isOpen}
+ <Modal
+ open={open}
+ width={820}
+ centered
title="Select Existing Webhooks"
- style={{
- width: 820,
- }}
okText="Confrim"
- okLoading={saving}
- okDisabled={!selectedIds.length}
+ okButtonProps={{
+ disabled: !selectedIds.length,
+ loading: saving,
+ }}
onCancel={onCancel}
onOk={handleSubmit}
>
@@ -71,7 +73,7 @@ export const SelectorDialog = ({ isOpen, saving, onCancel, onSubmit }: Props) =>
/>
</FormItem>
</S.Wrapper>
- </Dialog>
+ </Modal>
);
};
diff --git a/config-ui/src/plugins/register/webhook/components/view-dialog.tsx b/config-ui/src/plugins/register/webhook/components/view-dialog.tsx
index 6b3e42703..014499b2c 100644
--- a/config-ui/src/plugins/register/webhook/components/view-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/view-dialog.tsx
@@ -17,10 +17,11 @@
*/
import { useState, useMemo } from 'react';
+import { Modal } from 'antd';
import { Button, Intent } from '@blueprintjs/core';
import { useAppDispatch, useAppSelector } from '@/app/hook';
-import { Dialog, FormItem, CopyText, ExternalLink, Message } from '@/components';
+import { FormItem, CopyText, ExternalLink, Message } from '@/components';
import { selectWebhook, renewWebhookApiKey } from '@/features';
import { IWebhook } from '@/types';
import { operator } from '@/utils';
@@ -63,7 +64,7 @@ const transformURI = (prefix: string, webhook: IWebhook, apiKey: string) => {
};
export const ViewDialog = ({ initialId, onCancel }: Props) => {
- const [isOpen, setIsOpen] = useState(false);
+ const [open, setOpen] = useState(false);
const [operating, setOperating] = useState(false);
const [apiKey, setApiKey] = useState('');
@@ -80,12 +81,12 @@ export const ViewDialog = ({ initialId, onCancel }: Props) => {
if (success) {
setApiKey(res.apiKey);
- setIsOpen(false);
+ setOpen(false);
}
};
return (
- <Dialog style={{ width: 820 }} isOpen title="View Webhook" footer={null} onCancel={onCancel}>
+ <Modal open width={820} centered title="View Webhook" footer={null} onCancel={onCancel}>
<S.Wrapper>
<p>
Copy the following CURL commands to your issue tracking or CI/CD tools to push `Incidents` and `Deployments`
@@ -127,7 +128,7 @@ export const ViewDialog = ({ initialId, onCancel }: Props) => {
subLabel="If you have forgotten your API key, you can revoke the previous key and generate a new one as a replacement."
>
{!apiKey ? (
- <Button intent={Intent.PRIMARY} text="Revoke and generate a new key" onClick={() => setIsOpen(true)} />
+ <Button intent={Intent.PRIMARY} text="Revoke and generate a new key" onClick={() => setOpen(true)} />
) : (
<>
<S.ApiKey>
@@ -141,18 +142,21 @@ export const ViewDialog = ({ initialId, onCancel }: Props) => {
)}
</FormItem>
</S.Wrapper>
- <Dialog
- style={{ width: 820 }}
- isOpen={isOpen}
+ <Modal
+ open={open}
+ width={820}
+ centered
title="Are you sure you want to revoke the previous API key and generate a new one?"
- cancelText="Go Back"
okText="Confirm"
- okLoading={operating}
- onCancel={() => setIsOpen(false)}
+ cancelText="Go Back"
+ okButtonProps={{
+ loading: operating,
+ }}
+ onCancel={() => setOpen(false)}
onOk={handleGenerateNewKey}
>
<Message content="Once this action is done, the previous API key will become invalid and you will need to enter the new key in the application that uses this Webhook API." />
- </Dialog>
- </Dialog>
+ </Modal>
+ </Modal>
);
};
diff --git a/config-ui/src/plugins/register/webhook/connection.tsx b/config-ui/src/plugins/register/webhook/connection.tsx
index 0a7d83352..853c20c45 100644
--- a/config-ui/src/plugins/register/webhook/connection.tsx
+++ b/config-ui/src/plugins/register/webhook/connection.tsx
@@ -90,9 +90,7 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P
<Buttons position="bottom">
<Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} />
</Buttons>
- {type === 'add' && (
- <CreateDialog isOpen onCancel={handleHideDialog} onSubmitAfter={(id) => onCreateAfter?.(id)} />
- )}
+ {type === 'add' && <CreateDialog open onCancel={handleHideDialog} onSubmitAfter={(id) => onCreateAfter?.(id)} />}
{type === 'show' && currentID && <ViewDialog initialId={currentID} onCancel={handleHideDialog} />}
{type === 'edit' && currentID && <EditDialog initialId={currentID} onCancel={handleHideDialog} />}
{type === 'delete' && currentID && (
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
index f62ba1ad6..ec540942d 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -17,12 +17,12 @@
*/
import { useState, useMemo } from 'react';
-import { Table } from 'antd';
+import { Table, Modal } from 'antd';
import { Button, Tag, Intent, InputGroup } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, Dialog, FormItem, Selector, ExternalLink, CopyText, Message } from '@/components';
+import { PageHeader, FormItem, Selector, ExternalLink, CopyText, Message } from '@/components';
import { useRefreshData } from '@/hooks';
import { operator, formatTime } from '@/utils';
@@ -152,13 +152,16 @@ export const ApiKeys = () => {
}}
/>
{modal === 'create' && (
- <Dialog
- style={{ width: 820 }}
- isOpen
+ <Modal
+ open
+ width={820}
+ centered
title="Generate a New API Key"
- okLoading={operating}
okText="Generate"
- okDisabled={hasError}
+ okButtonProps={{
+ disabled: hasError,
+ loading: operating,
+ }}
onCancel={handleCancel}
onOk={handleSubmit}
>
@@ -201,34 +204,31 @@ export const ApiKeys = () => {
/>
</S.InputContainer>
</FormItem>
- </Dialog>
+ </Modal>
)}
{modal === 'show' && (
- <Dialog
- style={{ width: 820 }}
- isOpen
- title="Your API key has been generated!"
- footer={null}
- onCancel={handleCancel}
- >
+ <Modal open width={820} centered title="Your API key has been generated!" footer={null} onCancel={handleCancel}>
<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>
)}
{modal === 'delete' && (
- <Dialog
- style={{ width: 820 }}
- isOpen
+ <Modal
+ open
+ width={820}
+ centered
title="Are you sure you want to revoke this API key?"
- okLoading={operating}
okText="Confirm"
+ okButtonProps={{
+ loading: operating,
+ }}
onCancel={handleCancel}
onOk={handleRevoke}
>
<Message content="Any applications or scripts using this API key will no longer be able to access the DevLake API. You cannot undo this action." />
- </Dialog>
+ </Modal>
)}
</PageHeader>
);
diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx
index eb6c31233..176ab7d2e 100644
--- a/config-ui/src/routes/pipeline/components/table.tsx
+++ b/config-ui/src/routes/pipeline/components/table.tsx
@@ -17,14 +17,14 @@
*/
import { useState } from 'react';
-import { Table } from 'antd';
+import { Table, Modal } from 'antd';
import { ButtonGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { saveAs } from 'file-saver';
import API from '@/api';
import { DEVLAKE_ENDPOINT } from '@/config';
-import { IconButton, Inspector, Dialog } from '@/components';
+import { IconButton, Inspector } from '@/components';
import { IPipeline } from '@/types';
import { formatTime } from '@/utils';
@@ -124,9 +124,9 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
/>
{JSON && <Inspector isOpen title={`Pipeline ${JSON?.id}`} data={JSON} onClose={() => setJSON(null)} />}
{id && (
- <Dialog style={{ width: 820 }} isOpen title={`Pipeline ${id}`} footer={null} onCancel={() => setId(null)}>
+ <Modal open width={820} centered title={`Pipeline ${id}`} footer={null} onCancel={() => setId(null)}>
<PipelineTasks id={id} />
- </Dialog>
+ </Modal>
)}
</>
);