Skip to content

Commit fd9eff5

Browse files
dpanshugdpanshug
committed
Create & update task (improvement)
1 parent c65c900 commit fd9eff5

File tree

4 files changed

+83
-47
lines changed

4 files changed

+83
-47
lines changed

‎src/app/CacheManagers/TasksTableDisplay.tsx‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import {
3+
Alert,
34
Button,
45
Bullseye,
56
EmptyState,
@@ -15,7 +16,6 @@ import {
1516
DataListItemRow,
1617
DataListToggle,
1718
Pagination,
18-
TextArea,
1919
Title,
2020
Toolbar,
2121
ToolbarItem,
@@ -26,10 +26,9 @@ import {
2626
StackItem,
2727
Spinner
2828
} from '@patternfly/react-core';
29+
import { CodeEditor } from '@patternfly/react-code-editor';
2930
import SyntaxHighlighter from 'react-syntax-highlighter';
3031
import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
31-
import { TableEmptyState } from '@app/Common/TableEmptyState';
32-
import { global_FontSize_sm } from '@patternfly/react-tokens';
3332
import { useTranslation } from 'react-i18next';
3433
import { useFetchTask } from '@app/services/tasksHook';
3534
import { ExecuteTasks } from '@app/Tasks/ExecuteTasks';
@@ -57,9 +56,10 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
5756
const [editTaskName, setEditTaskName] = useState<string>('');
5857
const [editScript, setEditScript] = useState<string>('');
5958
const [scriptContent, setScriptContent] = useState(new Map<string, string>());
59+
const [scriptError, setScriptError] = useState<string>('');
6060

6161
useEffect(() => {
62-
if (tasks) {
62+
if (loading) {
6363
props.setTasksCount(tasks.length);
6464
const initSlice = (tasksPagination.page - 1) * tasksPagination.perPage;
6565
setFilteredTasks(tasks.slice(initSlice, initSlice + tasksPagination.perPage));
@@ -95,7 +95,6 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
9595
scriptContent.set(taskName, eitherResponse.value);
9696
} else {
9797
scriptContent.set(taskName, t('cache-managers.tasks.script-load-error'));
98-
addAlert(eitherResponse.value);
9998
}
10099
});
101100
};
@@ -105,16 +104,30 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
105104
setEditTaskName(taskName);
106105
setEditScript(scriptContent.get(taskName) as string);
107106
} else {
108-
setEditTaskName('');
107+
// save script
108+
109109
if (!scriptContent.has(taskName) || scriptContent.get(taskName) == '') {
110110
return;
111111
}
112-
scriptContent.set(taskName, editScript);
112+
113+
// Do not update if script not changed
114+
if (scriptContent.get(taskName) == editScript) {
115+
setEditTaskName('');
116+
setEditScript('');
117+
return;
118+
}
119+
113120
ConsoleServices.tasks()
114121
.createOrUpdateTask(taskName, editScript, false)
115-
.then((eitherCreate) => {
116-
addAlert(eitherCreate);
117-
loadScript(taskName);
122+
.then((actionResponse) => {
123+
if (actionResponse.success) {
124+
setScriptError('');
125+
setEditTaskName('');
126+
addAlert(actionResponse);
127+
loadScript(taskName);
128+
} else {
129+
setScriptError(actionResponse.message);
130+
}
118131
})
119132
.then(() => reload());
120133
}
@@ -144,6 +157,10 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
144157
setExpanded(newExpanded);
145158
};
146159

160+
const errorInScript = (taskName) => {
161+
return scriptContent.get(taskName) === t('cache-managers.tasks.script-load-error');
162+
};
163+
147164
const buildTaskToolbar = (taskName) => {
148165
if (!ConsoleServices.security().hasConsoleACL(ConsoleACL.CREATE, connectedUser)) {
149166
return '';
@@ -154,7 +171,7 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
154171
<ToolbarGroup>
155172
<ToolbarItem>
156173
<Button
157-
isDisabled={editTaskName == taskName.name && editScript.length == 0}
174+
isDisabled={(editTaskName === taskName.name && editScript.length === 0) || errorInScript(taskName.name)}
158175
id={'edit-button-' + taskName.name}
159176
name={'edit-button-' + taskName.name}
160177
aria-label={'edit-button-' + taskName.name}
@@ -168,6 +185,7 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
168185
</ToolbarItem>
169186
<ToolbarItem>
170187
<Button
188+
isDisabled={errorInScript(taskName.name)}
171189
id={'execute-button-' + taskName.name}
172190
name={'execute-button-' + taskName.name}
173191
aria-label={'execute-button-' + taskName.name}
@@ -203,15 +221,19 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
203221
);
204222
}
205223
return (
206-
<TextArea
207-
id="task-edit-area"
208-
data-cy="taskEditArea"
209-
onChange={(v) => setEditScript(v)}
210-
value={editScript}
211-
validated={editScript.length > 0 ? 'default' : 'error'}
212-
style={{ fontSize: global_FontSize_sm.value }}
213-
rows={15}
214-
/>
224+
<>
225+
{scriptError.length > 0 && (
226+
<Alert variant="danger" isInline title={scriptError} style={{ marginBottom: '1rem' }} />
227+
)}
228+
<CodeEditor
229+
id="task-edit-area"
230+
data-cy="taskEditArea"
231+
isLineNumbersVisible
232+
code={editScript}
233+
onChange={(v) => setEditScript(v)}
234+
height="200px"
235+
/>
236+
</>
215237
);
216238
};
217239

‎src/app/Tasks/CreateTask.tsx‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
import React, { useState } from 'react';
2-
import { Button, ButtonVariant, Form, FormGroup, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
2+
import {
3+
Alert,
4+
AlertVariant,
5+
Button,
6+
ButtonVariant,
7+
Form,
8+
FormGroup,
9+
Modal,
10+
ModalVariant,
11+
TextInput
12+
} from '@patternfly/react-core';
313
import { useTranslation } from 'react-i18next';
414
import { CodeEditor } from '@patternfly/react-code-editor';
515
import formUtils, { IField } from '@services/formUtils';
6-
import { useCreateTask } from '@app/services/tasksHook';
716
import { PopoverHelp } from '@app/Common/PopoverHelp';
17+
import { useApiAlert } from '@app/utils/useApiAlert';
18+
import { ConsoleServices } from '@services/ConsoleServices';
819

920
const CreateTask = (props: { isModalOpen: boolean; submitModal: () => void; closeModal: () => void }) => {
1021
const { t } = useTranslation();
1122
const brandname = t('brandname.brandname');
23+
const { addAlert } = useApiAlert();
1224

1325
const nameInitialState: IField = {
1426
value: '',
@@ -24,7 +36,7 @@ const CreateTask = (props: { isModalOpen: boolean; submitModal: () => void; clos
2436

2537
const [name, setName] = useState<IField>(nameInitialState);
2638
const [script, setScript] = useState<IField>(scriptInitialState);
27-
const { onCreateTask } = useCreateTask(name.value, script.value);
39+
const [error, setError] = useState('');
2840

2941
const handleSubmit = () => {
3042
let isValid = true;
@@ -34,20 +46,36 @@ const CreateTask = (props: { isModalOpen: boolean; submitModal: () => void; clos
3446
formUtils.validateRequiredField(script.value.trim(), t('cache-managers.tasks.script'), setScript) && isValid;
3547

3648
if (isValid) {
37-
onCreateTask();
38-
setName(nameInitialState);
39-
setScript(scriptInitialState);
40-
props.submitModal();
49+
ConsoleServices.tasks()
50+
.createOrUpdateTask(name.value, script.value, true)
51+
.then((actionResponse) => {
52+
if (actionResponse.success) {
53+
setName(nameInitialState);
54+
setScript(scriptInitialState);
55+
setError('');
56+
addAlert(actionResponse);
57+
props.submitModal();
58+
} else {
59+
setError(actionResponse.message);
60+
}
61+
});
4162
}
4263
};
4364

65+
const closeModal = () => {
66+
props.closeModal();
67+
setName(nameInitialState);
68+
setScript(scriptInitialState);
69+
setError('');
70+
};
71+
4472
return (
4573
<Modal
4674
id={'create-task-modal'}
4775
variant={ModalVariant.medium}
4876
isOpen={props.isModalOpen}
4977
title={t('cache-managers.tasks.create-task')}
50-
onClose={props.closeModal}
78+
onClose={closeModal}
5179
aria-label={t('cache-managers.tasks.create-task')}
5280
disableFocusTrap={true}
5381
actions={[
@@ -60,7 +88,7 @@ const CreateTask = (props: { isModalOpen: boolean; submitModal: () => void; clos
6088
>
6189
{t('cache-managers.tasks.confirm')}
6290
</Button>,
63-
<Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={props.closeModal}>
91+
<Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={closeModal}>
6492
{t('cache-managers.tasks.cancel')}
6593
</Button>
6694
]}
@@ -70,6 +98,7 @@ const CreateTask = (props: { isModalOpen: boolean; submitModal: () => void; clos
7098
e.preventDefault();
7199
}}
72100
>
101+
{error !== '' && <Alert variant={AlertVariant.danger} title={error} />}
73102
<FormGroup
74103
validated={name.validated}
75104
isRequired
@@ -93,7 +122,7 @@ const CreateTask = (props: { isModalOpen: boolean; submitModal: () => void; clos
93122
<PopoverHelp
94123
name="script"
95124
label={t('cache-managers.tasks.provide-script')}
96-
content={t('cache-managers.tasks.script-tooltip',{ brandname: brandname })}
125+
content={t('cache-managers.tasks.script-tooltip', { brandname: brandname })}
97126
/>
98127
}
99128
helperTextInvalid={script.invalidText}

‎src/app/Tasks/ExecuteTasks.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const ExecuteTasks = (props: { task; isModalOpen: boolean; closeModal: () => voi
5858
return (
5959
<TextContent>
6060
<Text>
61-
Do you want to execute <strong>{props.task?.name}</strong>
61+
Do you want to execute <strong>{props.task?.name}</strong> ?
6262
</Text>
6363
</TextContent>
6464
);

‎src/app/services/tasksHook.ts‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function useFetchTask() {
1818
setError(either.value.message);
1919
}
2020
})
21-
.then(() => setLoading(false));
21+
.finally(() => setLoading(false));
2222
}
2323
}, [loading]);
2424

@@ -48,18 +48,3 @@ export function useExecuteTask(name: string, params) {
4848
onExecute
4949
};
5050
}
51-
52-
export function useCreateTask(taskName: string, script) {
53-
const { addAlert } = useApiAlert();
54-
55-
const onCreateTask = () => {
56-
ConsoleServices.tasks()
57-
.createOrUpdateTask(taskName, script, true)
58-
.then((actionResponse) => {
59-
addAlert(actionResponse);
60-
});
61-
};
62-
return {
63-
onCreateTask
64-
};
65-
}

0 commit comments

Comments
 (0)