diff --git a/frontend/ee/components/UsersPage/UsersFilter.jsx b/frontend/ee/components/UsersPage/UsersFilter.jsx index 457de67ae1..e268712085 100644 --- a/frontend/ee/components/UsersPage/UsersFilter.jsx +++ b/frontend/ee/components/UsersPage/UsersFilter.jsx @@ -1,15 +1,28 @@ import React from 'react'; +import Select from '@/_ui/Select'; + +const userStatusOptions = [ + { name: 'All', value: '' }, + { name: 'Active', value: 'active' }, + { name: 'Invited', value: 'invited' }, + { name: 'Archived', value: 'archived' }, +]; const UsersFilter = ({ filterList, darkMode, clearIconPressed }) => { - const [options, setOptions] = React.useState({ email: '', firstName: '', lastName: '' }); + const [options, setOptions] = React.useState({ email: '', firstName: '', lastName: '', status: '' }); - const valuesChanged = (event) => { - const newOptions = { ...options, [event.target.name]: event.target.value }; + const valuesChanged = (event, key) => { + let newOptions = {}; + if (!key) { + newOptions = { ...options, [event.target.name]: event.target.value }; + } else { + newOptions = { ...options, [key]: event }; + } setOptions(newOptions); }; const clearTextAndResult = () => { - setOptions({ email: '', firstName: '', lastName: '' }); + setOptions({ email: '', firstName: '', lastName: '', status: '' }); clearIconPressed(); }; @@ -32,7 +45,7 @@ const UsersFilter = ({ filterList, darkMode, clearIconPressed }) => { data-cy="email-filter-input-field" /> -
+
{ data-cy="first-name-filter-input-field" />
-
+
{ data-cy="last-name-filter-input-field" />
-
+
+