diff options
author | Dong Zhang <dong.zhang@bmw.de> | 2023-01-24 15:23:04 +0100 |
---|---|---|
committer | Dong Zhang <dong.zhang@bmw.de> | 2023-03-15 09:08:35 +0100 |
commit | f848f251e45ab518cde3fa2be197d5694e4dac11 (patch) | |
tree | 38f04cb6e99edc76e708772b038d522fa493ce8d /web/src/containers/FilterToolbar.jsx | |
parent | ab219bca5fa2eadf77a570ecbed6e06d03087904 (diff) | |
download | zuul-f848f251e45ab518cde3fa2be197d5694e4dac11.tar.gz |
Zuul-Web: Filter input validation for "Change"
User sometimes tends to copy the value from the "Change" column as a input
for filtering, which would cause a 500 error in API.
To fix this we do a input validation to indicate that the change must be
a integer for example a PR bumber. So that make it clear any other fomat
like a ref or a string with "," is not supported.
Change-Id: Ia25a60429acc48c5773c808be6a900ba9bdf608e
Diffstat (limited to 'web/src/containers/FilterToolbar.jsx')
-rw-r--r-- | web/src/containers/FilterToolbar.jsx | 17 |
1 files changed, 14 insertions, 3 deletions
diff --git a/web/src/containers/FilterToolbar.jsx b/web/src/containers/FilterToolbar.jsx index 328d60d85..bcf74c062 100644 --- a/web/src/containers/FilterToolbar.jsx +++ b/web/src/containers/FilterToolbar.jsx @@ -13,6 +13,7 @@ // under the License. import React, { useState } from 'react' +import { useDispatch } from 'react-redux' import PropTypes from 'prop-types' import { Button, @@ -32,12 +33,14 @@ import { } from '@patternfly/react-core' import { FilterIcon, SearchIcon } from '@patternfly/react-icons' +import { addNotification } from '../actions/notifications' import { FilterSelect } from './filters/Select' import { FilterTernarySelect } from './filters/TernarySelect' import { FilterCheckbox } from './filters/Checkbox' function FilterToolbar(props) { + const dispatch = useDispatch() const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = useState(false) const [currentCategory, setCurrentCategory] = useState( props.filterCategories[0].title @@ -58,15 +61,22 @@ function FilterToolbar(props) { } function handleInputSend(event, category) { - const { onFilterChange, filters } = props + const { onFilterChange, filters, filterInputValidation } = props // In case the event comes from a key press, only accept "Enter" if (event.key && event.key !== 'Enter') { return } - // Ignore empty values - if (!inputValue) { + const validationResult = filterInputValidation(category.key, inputValue) + if (!validationResult.success) { + dispatch(addNotification( + { + text: validationResult.message, + type: 'error', + status: '', + url: '', + })) return } @@ -250,6 +260,7 @@ FilterToolbar.propTypes = { onFilterChange: PropTypes.func.isRequired, filters: PropTypes.object.isRequired, filterCategories: PropTypes.array.isRequired, + filterInputValidation: PropTypes.func.isRequired, } function getChipsFromFilters(filters, category) { |