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 367ac5023 refactor(config-ui): remove hook use-operator (#4873)
367ac5023 is described below
commit 367ac50235077ff3b2b74fb3822a42bb055a9f08
Author: 青湛 <[email protected]>
AuthorDate: Tue Apr 11 15:09:55 2023 +0800
refactor(config-ui): remove hook use-operator (#4873)
---
config-ui/src/hooks/index.ts | 1 -
config-ui/src/hooks/use-operator.ts | 52 ----------------------
.../src/pages/pipeline/components/cancel/index.tsx | 20 ++++++---
.../src/pages/pipeline/components/rerun/index.tsx | 23 ++++++----
.../components/connection-form/operate/save.tsx | 30 +++++++------
.../components/connection-form/operate/test.tsx | 43 ++++++++++--------
.../components/transformation-form/index.tsx | 40 +++++++++--------
7 files changed, 91 insertions(+), 118 deletions(-)
diff --git a/config-ui/src/hooks/index.ts b/config-ui/src/hooks/index.ts
index c6ff3eb54..b0440f66e 100644
--- a/config-ui/src/hooks/index.ts
+++ b/config-ui/src/hooks/index.ts
@@ -17,6 +17,5 @@
*/
export * from './use-auto-refresh';
-export * from './use-operator';
export * from './use-refresh-data';
export * from './user-proxy-prefix';
diff --git a/config-ui/src/hooks/use-operator.ts
b/config-ui/src/hooks/use-operator.ts
deleted file mode 100644
index d961d40e2..000000000
--- a/config-ui/src/hooks/use-operator.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 { useState, useMemo } from 'react';
-
-import { operator } from '@/utils';
-
-export const useOperator = <T>(
- request: (paylod?: any) => Promise<T>,
- options?: {
- callback?: (res?: any) => void;
- formatReason?: (err: unknown) => string;
- formatMessage?: () => string;
- },
-) => {
- const [operating, setOperating] = useState(false);
-
- const handleSubmit = async (paylod?: any) => {
- const [success, res] = await operator(() => request(paylod), {
- setOperating,
- formatReason: options?.formatReason ? options?.formatMessage : (err) =>
(err as any).response?.data?.message,
- formatMessage: options?.formatMessage,
- });
-
- if (success) {
- options?.callback?.(res);
- }
- };
-
- return useMemo(
- () => ({
- operating,
- onSubmit: handleSubmit,
- }),
- [operating],
- );
-};
diff --git a/config-ui/src/pages/pipeline/components/cancel/index.tsx
b/config-ui/src/pages/pipeline/components/cancel/index.tsx
index aae3a30d2..3dc22308a 100644
--- a/config-ui/src/pages/pipeline/components/cancel/index.tsx
+++ b/config-ui/src/pages/pipeline/components/cancel/index.tsx
@@ -16,10 +16,10 @@
*
*/
-import React from 'react';
+import { useState } from 'react';
import { IconButton } from '@/components';
-import { useOperator } from '@/hooks';
+import { operator } from '@/utils';
import { StatusEnum } from '../../types';
import * as API from '../../api';
@@ -32,15 +32,23 @@ interface Props {
}
export const PipelineCancel = ({ id, status }: Props) => {
+ const [canceling, setCanceling] = useState(false);
+
const { setVersion } = usePipeline();
- const { operating, onSubmit } = useOperator(() => API.deletePipeline(id), {
- callback: () => setVersion((v) => v + 1),
- });
+ const handleSubmit = async () => {
+ const [success] = await operator(() => API.deletePipeline(id), {
+ setOperating: setCanceling,
+ });
+
+ if (success) {
+ setVersion((v) => v + 1);
+ }
+ };
if (![StatusEnum.ACTIVE, StatusEnum.RUNNING,
StatusEnum.RERUN].includes(status)) {
return null;
}
- return <IconButton loading={operating} icon="disable" tooltip="Cancel"
onClick={onSubmit} />;
+ return <IconButton loading={canceling} icon="disable" tooltip="Cancel"
onClick={handleSubmit} />;
};
diff --git a/config-ui/src/pages/pipeline/components/rerun/index.tsx
b/config-ui/src/pages/pipeline/components/rerun/index.tsx
index 89f0200f1..7f1eb1445 100644
--- a/config-ui/src/pages/pipeline/components/rerun/index.tsx
+++ b/config-ui/src/pages/pipeline/components/rerun/index.tsx
@@ -15,11 +15,10 @@
* limitations under the License.
*
*/
-
-import React from 'react';
+import { useState } from 'react';
import { IconButton } from '@/components';
-import { useOperator } from '@/hooks';
+import { operator } from '@/utils';
import { StatusEnum } from '../../types';
import * as API from '../../api';
@@ -33,19 +32,27 @@ interface Props {
}
export const PipelineRerun = ({ type, id, status }: Props) => {
+ const [reruning, setReruning] = useState(false);
+
const { setVersion } = usePipeline();
- const { operating, onSubmit } = useOperator(() => (type === 'task' ?
API.taskRerun(id) : API.pipelineRerun(id)), {
- callback: () => setVersion((v) => v + 1),
- });
+ const handleSubmit = async () => {
+ const [success] = await operator(() => (type === 'task' ?
API.taskRerun(id) : API.pipelineRerun(id)), {
+ setOperating: setReruning,
+ });
+
+ if (success) {
+ setVersion((v) => v + 1);
+ }
+ };
if (![StatusEnum.COMPLETED, StatusEnum.PARTIAL, StatusEnum.FAILED,
StatusEnum.CANCELLED].includes(status)) {
return null;
}
if (type === 'task') {
- return <IconButton loading={operating} icon="repeat" tooltip="Rerun task"
onClick={onSubmit} />;
+ return <IconButton loading={reruning} icon="repeat" tooltip="Rerun task"
onClick={handleSubmit} />;
}
- return <IconButton loading={operating} icon="repeat" tooltip="Rerun failed
tasks" onClick={onSubmit} />;
+ return <IconButton loading={reruning} icon="repeat" tooltip="Rerun failed
tasks" onClick={handleSubmit} />;
};
diff --git a/config-ui/src/plugins/components/connection-form/operate/save.tsx
b/config-ui/src/plugins/components/connection-form/operate/save.tsx
index 890d7e8ce..a4143b806 100644
--- a/config-ui/src/plugins/components/connection-form/operate/save.tsx
+++ b/config-ui/src/plugins/components/connection-form/operate/save.tsx
@@ -16,11 +16,11 @@
*
*/
-import React, { useMemo } from 'react';
+import { useState, useMemo } from 'react';
import { useHistory } from 'react-router-dom';
import { Button, Intent } from '@blueprintjs/core';
-import { useOperator } from '@/hooks';
+import { operator } from '@/utils';
import * as API from '../api';
@@ -32,27 +32,29 @@ interface Props {
}
export const Save = ({ plugin, connectionId, values, errors }: Props) => {
+ const [saving, setSaving] = useState(false);
const history = useHistory();
- const { operating, onSubmit } = useOperator(
- (paylaod) =>
- !connectionId ? API.createConnection(plugin, paylaod) :
API.updateConnection(plugin, connectionId, paylaod),
- {
- callback: () => history.push(`/connections/${plugin}`),
- },
- );
+ const handleSubmit = async () => {
+ const [success] = await operator(
+ () => (!connectionId ? API.createConnection(plugin, values) :
API.updateConnection(plugin, connectionId, values)),
+ {
+ setOperating: setSaving,
+ },
+ );
+
+ if (success) {
+ history.push(`/connections/${plugin}`);
+ }
+ };
const disabled = useMemo(() => {
return Object.values(errors).some((value) => value);
}, [errors]);
- const handleSubmit = () => {
- onSubmit(values);
- };
-
return (
<Button
- loading={operating}
+ loading={saving}
disabled={disabled}
intent={Intent.PRIMARY}
outlined
diff --git a/config-ui/src/plugins/components/connection-form/operate/test.tsx
b/config-ui/src/plugins/components/connection-form/operate/test.tsx
index a05cacd1a..f2222a691 100644
--- a/config-ui/src/plugins/components/connection-form/operate/test.tsx
+++ b/config-ui/src/plugins/components/connection-form/operate/test.tsx
@@ -16,11 +16,11 @@
*
*/
-import React, { useMemo } from 'react';
+import { useState, useMemo } from 'react';
import { Button } from '@blueprintjs/core';
import { pick } from 'lodash';
-import { useOperator } from '@/hooks';
+import { operator } from '@/utils';
import * as API from '../api';
@@ -31,28 +31,35 @@ interface Props {
}
export const Test = ({ plugin, values, errors }: Props) => {
- const { operating, onSubmit } = useOperator((payload) =>
API.testConnection(plugin, payload));
+ const [testing, setTesting] = useState(false);
const disabled = useMemo(() => {
return Object.values(errors).some((value) => value);
}, [errors]);
- const handleSubmit = () => {
- onSubmit(
- pick(values, [
- 'endpoint',
- 'token',
- 'username',
- 'password',
- 'proxy',
- 'authMethod',
- 'appId',
- 'secretKey',
- 'tenantId',
- 'tenantType',
- ]),
+ const handleSubmit = async () => {
+ await operator(
+ () =>
+ API.testConnection(
+ plugin,
+ pick(values, [
+ 'endpoint',
+ 'token',
+ 'username',
+ 'password',
+ 'proxy',
+ 'authMethod',
+ 'appId',
+ 'secretKey',
+ 'tenantId',
+ 'tenantType',
+ ]),
+ ),
+ {
+ setOperating: setTesting,
+ },
);
};
- return <Button loading={operating} disabled={disabled} outlined text="Test
Connection" onClick={handleSubmit} />;
+ return <Button loading={testing} disabled={disabled} outlined text="Test
Connection" onClick={handleSubmit} />;
};
diff --git a/config-ui/src/plugins/components/transformation-form/index.tsx
b/config-ui/src/plugins/components/transformation-form/index.tsx
index e223a44c8..eb33e89d2 100644
--- a/config-ui/src/plugins/components/transformation-form/index.tsx
+++ b/config-ui/src/plugins/components/transformation-form/index.tsx
@@ -20,7 +20,8 @@ import { useEffect, useMemo, useState } from 'react';
import { Button, InputGroup, Intent } from '@blueprintjs/core';
import { Card, ExternalLink, PageLoading } from '@/components';
-import { useOperator, useRefreshData } from '@/hooks';
+import { useRefreshData } from '@/hooks';
+import { operator } from '@/utils';
import { getPluginConfig } from '@/plugins';
import { GitHubTransformation } from '@/plugins/register/github';
import { JiraTransformation } from '@/plugins/register/jira';
@@ -43,6 +44,7 @@ interface Props {
}
export const TransformationForm = ({ plugin, connectionId, scopeId, id,
onCancel }: Props) => {
+ const [saving, setSaving] = useState(false);
const [name, setName] = useState('');
const [transformation, setTransformation] = useState({});
@@ -53,22 +55,28 @@ export const TransformationForm = ({ plugin, connectionId,
scopeId, id, onCancel
return API.getTransformation(plugin, connectionId, id);
}, [id]);
- const { operating, onSubmit } = useOperator(
- (payload) =>
- id
- ? API.updateTransformation(plugin, connectionId, id, payload)
- : API.createTransformation(plugin, connectionId, payload),
- {
- callback: onCancel,
- formatMessage: () => 'Transformation created successfully',
- },
- );
-
useEffect(() => {
setTransformation(data ?? config.transformation);
setName(data?.name ?? '');
}, [data, config.transformation]);
+ const handleSubmit = async () => {
+ const [success] = await operator(
+ () =>
+ id
+ ? API.updateTransformation(plugin, connectionId, id, {
...transformation, name })
+ : API.createTransformation(plugin, connectionId, {
...transformation, name }),
+ {
+ setOperating: setSaving,
+ formatMessage: () => 'Transformation created successfully',
+ },
+ );
+
+ if (success) {
+ onCancel?.();
+ }
+ };
+
if (!ready) {
return <PageLoading />;
}
@@ -129,13 +137,7 @@ export const TransformationForm = ({ plugin, connectionId,
scopeId, id, onCancel
<S.Btns>
<Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={() =>
onCancel?.(undefined)} />
- <Button
- intent={Intent.PRIMARY}
- disabled={!name}
- loading={operating}
- text="Save"
- onClick={() => onSubmit({ ...transformation, name })}
- />
+ <Button intent={Intent.PRIMARY} disabled={!name} loading={saving}
text="Save" onClick={handleSubmit} />
</S.Btns>
</S.Wrapper>
);
