Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LPS-108065 SF #84286

Closed
wants to merge 3 commits into from
Closed

LPS-108065 SF #84286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e368a2e
LPS-108065 Fix onChange and onSelect behaviour of the Autocomplete co…
Feb 4, 2020
3d80822
LPS-108065 Improve InstanceListPage modal component callback function
Feb 4, 2020
f7b2e91
LPS-108065 SF
inacionery Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion ...page/modal/bulk-reassign/select-assignees-step/BulkReassignSelectAssigneesStepTable.es.js
View file
Open in desktop
Expand Up @@ -26,7 +26,6 @@ const Item = ({
workflowInstanceId
}) => {
const {bulkModal, setBulkModal} = useContext(ModalContext);

const {
reassignedTasks,
reassigning,
Expand Down
21 changes: 19 additions & 2 deletions ...ces/js/components/instance-list-page/modal/single-reassign/SingleReassignModalTable.es.js
View file
Open in desktop
Expand Up @@ -12,7 +12,13 @@
import ClayIcon from '@clayui/icon';
import ClayTable from '@clayui/table';
import {ClayTooltipProvider} from '@clayui/tooltip';
import React, {useState, useEffect, useMemo, useContext} from 'react';
import React, {
useCallback,
useContext,
useEffect,
useMemo,
useState
} from 'react';

import {Autocomplete} from '../../../../shared/components/autocomplete/Autocomplete.es';
import {useFetch} from '../../../../shared/hooks/useFetch.es';
Expand All @@ -26,6 +32,12 @@ const AssigneeInput = ({reassignedTasks, setReassignedTasks, taskId}) => {
params: {page: -1, pageSize: -1},
url: `/workflow-tasks/${taskId}/assignable-users`
});
const handleSelect = useCallback(
value => {
setNewAssignee(value);
},
[setNewAssignee]
);

const tasks = useMemo(() => reassignedTasks.tasks, [reassignedTasks.tasks]);

Expand All @@ -49,6 +61,11 @@ const AssigneeInput = ({reassignedTasks, setReassignedTasks, taskId}) => {
});
}
}
else {
setReassignedTasks(() => ({
tasks: []
}));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [newAssignee]);

Expand All @@ -57,7 +74,7 @@ const AssigneeInput = ({reassignedTasks, setReassignedTasks, taskId}) => {
return (
<Autocomplete
items={data.items}
onSelect={setNewAssignee}
onSelect={handleSelect}
promises={promises}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion ...low-metrics-web/src/main/resources/META-INF/resources/js/components/sla/SLAListItem.es.js
View file
Open in desktop
Expand Up @@ -80,7 +80,7 @@ class SLAListItem extends React.Component {
className="component-action dropdown-toggle"
data-toggle="liferay-dropdown"
href="#1"
id="dropdownAction1"
id="dropDownAction"
role="button"
>
<Icon iconName="ellipsis-v" />
Expand Down
40 changes: 33 additions & 7 deletions ...rc/main/resources/META-INF/resources/js/shared/components/autocomplete/Autocomplete.es.js
View file
Open in desktop
Expand Up @@ -27,14 +27,32 @@ const Autocomplete = ({
promises
}) => {
const [dropDownItems, setDropDownItems] = useState([]);
const [dropDownVisible, setDropDownVisible] = useState(() => false);
const [value, setValue] = useState(() => '');
const handleChange = useCallback(value => {
setValue(() => value);
setDropDownVisible(() => value.length > 0);
const [value, setValue] = useState('');
const [dropDownVisible, setDropDownVisible] = useState(false);
const [selectedValue, setSelectedValue] = useState();

const handleChange = useCallback(
value => {
if (selectedValue) {
onSelect();
setSelectedValue();
}
setValue(value);
setDropDownVisible(() => value.length > 0);

// eslint-disable-next-line react-hooks/exhaustive-deps
},
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
[selectedValue]
);

const handleSelect = useCallback(
item => {
onSelect(item);
setSelectedValue(item.name);
},
[onSelect]
);

useEffect(() => {
setDropDownItems(items);
Expand All @@ -59,6 +77,14 @@ const Autocomplete = ({
setValue(defaultValue);
}, [defaultValue]);

useEffect(() => {
if (disabled) {
setValue('');
setDropDownVisible(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [disabled]);

return (
<PromisesResolver promises={promises}>
<ClayAutocomplete>
Expand All @@ -85,7 +111,7 @@ const Autocomplete = ({
active={dropDownVisible}
items={dropDownItems}
match={value}
onSelect={onSelect}
onSelect={handleSelect}
setActive={setDropDownVisible}
setValue={setValue}
/>
Expand Down
8 changes: 4 additions & 4 deletions ...b/test/components/instance-list-page/modal/single-reassign/SingleReassignModalTable.es.js
View file
Open in desktop
Expand Up @@ -294,8 +294,8 @@ describe('The AssigneeInput component should', () => {

fireEvent.change(autocompleteInput, {target: {value: 'Test'}});
fireEvent.blur(autocompleteInput);
const dropdownListItem = getByTestId('dropDownListItem');
fireEvent.click(dropdownListItem);
const dropDownListItem = getByTestId('dropDownListItem');
fireEvent.click(dropDownListItem);
});

test('Select a new assignee with input already filled', async () => {
Expand All @@ -314,7 +314,7 @@ describe('The AssigneeInput component should', () => {

fireEvent.change(autocompleteInput, {target: {value: 'Test'}});
fireEvent.blur(autocompleteInput);
const dropdownListItem = getByTestId('dropDownListItem');
fireEvent.click(dropdownListItem);
const dropDownListItem = getByTestId('dropDownListItem');
fireEvent.click(dropDownListItem);
});
});
6 changes: 3 additions & 3 deletions ...flow/portal-workflow-metrics-web/test/components/sla/__snapshots__/SLAListItem.es.js.snap
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@ exports[`Should render component 1`] = `
className="component-action dropdown-toggle"
data-toggle="liferay-dropdown"
href="#1"
id="dropdownAction1"
id="dropDownAction"
role="button"
>
<svg
Expand Down Expand Up @@ -215,7 +215,7 @@ exports[`Should render component 2`] = `
className="component-action dropdown-toggle"
data-toggle="liferay-dropdown"
href="#1"
id="dropdownAction1"
id="dropDownAction"
role="button"
>
<Icon
Expand Down Expand Up @@ -431,7 +431,7 @@ exports[`Should render component blocked 1`] = `
className="component-action dropdown-toggle"
data-toggle="liferay-dropdown"
href="#1"
id="dropdownAction1"
id="dropDownAction"
role="button"
>
<Icon
Expand Down
6 changes: 3 additions & 3 deletions ...low/portal-workflow-metrics-web/test/components/sla/__snapshots__/SLAListTable.es.js.snap
View file
Open in desktop
Expand Up @@ -105,7 +105,7 @@ exports[`Should render component 1`] = `
className="component-action dropdown-toggle"
data-toggle="liferay-dropdown"
href="#1"
id="dropdownAction1"
id="dropDownAction"
role="button"
>
<svg
Expand Down Expand Up @@ -187,7 +187,7 @@ exports[`Should render component 1`] = `
className="component-action dropdown-toggle"
data-toggle="liferay-dropdown"
href="#1"
id="dropdownAction1"
id="dropDownAction"
role="button"
>
<svg
Expand Down Expand Up @@ -269,7 +269,7 @@ exports[`Should render component 1`] = `
className="component-action dropdown-toggle"
data-toggle="liferay-dropdown"
href="#1"
id="dropdownAction1"
id="dropDownAction"
role="button"
>
<svg
Expand Down
4 changes: 2 additions & 2 deletions ...apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/MultiSelect.es.js
View file
Open in desktop
Expand Up @@ -46,7 +46,7 @@ test('Should add a tag', () => {
expect(component).toMatchSnapshot();
});

test('Should hide the dropdown list', () => {
test('Should hide the dropDown list', () => {
const component = mount(
<MultiSelect data={data} selectedTagsId={selectedTagsId} />
);
Expand Down Expand Up @@ -86,7 +86,7 @@ test('Should search', () => {
expect(component).toMatchSnapshot();
});

test('Should show the dropdown list', () => {
test('Should show the dropDown list', () => {
const component = mount(
<MultiSelect data={data} selectedTagsId={selectedTagsId} />
);
Expand Down
4 changes: 2 additions & 2 deletions ...w/portal-workflow-metrics-web/test/shared/components/__snapshots__/MultiSelect.es.js.snap
View file
Open in desktop
Expand Up @@ -260,7 +260,7 @@ exports[`Should add a tag 1`] = `
</MultiSelect>
`;

exports[`Should hide the dropdown list 1`] = `
exports[`Should hide the dropDown list 1`] = `
<MultiSelect
data={
Array [
Expand Down Expand Up @@ -998,7 +998,7 @@ exports[`Should search 1`] = `
</MultiSelect>
`;

exports[`Should show the dropdown list 1`] = `
exports[`Should show the dropDown list 1`] = `
<MultiSelect
data={
Array [
Expand Down
4 changes: 2 additions & 2 deletions ...rkflow/portal-workflow-metrics-web/test/shared/components/autocomplete/Autocomplete.es.js
View file
Open in desktop
Expand Up @@ -42,8 +42,8 @@ describe('The Autocomplete component should', () => {
afterEach(() => cleanup);

test('Render its items list', () => {
const dropdownListItem = getByTestId('dropDownListItem');
expect(dropdownListItem.innerHTML).toContain('0test test0');
const dropDownListItem = getByTestId('dropDownListItem');
expect(dropDownListItem.innerHTML).toContain('0test test0');
});

test('Fire onChange handler function on change its text', () => {
Expand Down
2 changes: 1 addition & 1 deletion ...ortal-workflow-metrics-web/test/shared/components/autocomplete/AutocompleteDropDown.es.js
View file
Open in desktop
Expand Up @@ -40,7 +40,7 @@ describe('The AssigneeInput component should', () => {
);
});

test('Fire blur event when user blurs the dropdown', () => {
test('Fire blur event when user blurs the dropDown', () => {
const {getByTestId} = render(
<Autocomplete items={items} onChange={onChange} />
);
Expand Down