diff --git a/src/features/auth/roles.js b/src/features/auth/roles.js index 5eaa209a..9e9374df 100644 --- a/src/features/auth/roles.js +++ b/src/features/auth/roles.js @@ -17,6 +17,7 @@ export const MANAGE_USERS_ROLES = [MANAGER]; export const WRITE_PROJECT_ROLES = [MANAGER]; export const READ_COMMENT_ROLES = [MANAGER, MEMBER]; export const WRITE_COMMENT_ROLES = [MANAGER, MEMBER]; +export const QUERY_COMMENTS_ROLES = [MANAGER, MEMBER]; export const hasRole = (currRoles, targetRoles = []) => currRoles && (currRoles.includes(SUPER_USER) || currRoles.some((role) => targetRoles.includes(role))); diff --git a/src/features/filters/CommentsFilter.jsx b/src/features/filters/CommentsFilter.jsx new file mode 100644 index 00000000..b48c41af --- /dev/null +++ b/src/features/filters/CommentsFilter.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import Accordion from '../../components/Accordion'; +import { Formik, Form, Field, ErrorMessage } from 'formik'; +import { FormWrapper, FormError, FieldRow, ButtonRow } from '../../components/Form.jsx'; +import { styled } from '../../theme/stitches.config.js'; +import Button from '../../components/Button.jsx'; +import { useDispatch, useSelector } from 'react-redux'; +import { commentsFilterChanged, selectCommentsFilter } from './filtersSlice.js'; + +const StyledFieldRow = styled(FieldRow, { + display: 'block', +}); + +const StyledButtonRow = styled(ButtonRow, { + paddingBottom: '$0', +}); + +export const CommentsFilter = () => { + const commentsFilter = useSelector(selectCommentsFilter); + const dispatch = useDispatch(); + + const handleRemoveButtonClick = () => dispatch(commentsFilterChanged(null)); + + const handleCommentsFilterSubmit = (values) => { + dispatch(commentsFilterChanged(values.filter)); + }; + + return ( + +
+ + handleCommentsFilterSubmit(values)} + > +
+ + e.stopPropagation()} + onKeyDownCapture={(e) => e.stopPropagation()} + /> + + + + + + +
+
+
+
+
+ ); +} diff --git a/src/features/filters/FiltersPanel.jsx b/src/features/filters/FiltersPanel.jsx index e5ceb866..87ed39fd 100644 --- a/src/features/filters/FiltersPanel.jsx +++ b/src/features/filters/FiltersPanel.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { styled } from '../../theme/stitches.config.js'; import { selectUserCurrentRoles } from '../auth/authSlice.js'; -import { hasRole, QUERY_WITH_CUSTOM_FILTER } from '../auth/roles.js'; +import { hasRole, QUERY_COMMENTS_ROLES, QUERY_WITH_CUSTOM_FILTER } from '../auth/roles.js'; import PanelHeader from '../../components/PanelHeader.jsx'; import StyledScrollArea from '../../components/ScrollArea.jsx'; import DeploymentFilter from './DeploymentFilter.jsx'; @@ -11,6 +11,7 @@ import DateFilter from './DateFilter.jsx'; import LabelFilter from './LabelFilter.jsx'; import CustomFilter from './CustomFilter.jsx'; import FiltersPanelFooter from './FiltersPanelFooter.jsx'; +import { CommentsFilter } from './CommentsFilter.jsx'; const PanelBody = styled('div', { @@ -49,6 +50,9 @@ const FiltersPanel = ({ toggleFiltersPanel }) => { + {hasRole(userRoles, QUERY_COMMENTS_ROLES) && + + } {hasRole(userRoles, QUERY_WITH_CUSTOM_FILTER) && } @@ -59,4 +63,4 @@ const FiltersPanel = ({ toggleFiltersPanel }) => { ); } -export default FiltersPanel; \ No newline at end of file +export default FiltersPanel; diff --git a/src/features/filters/filtersSlice.js b/src/features/filters/filtersSlice.js index d41ddda1..3cae2161 100644 --- a/src/features/filters/filtersSlice.js +++ b/src/features/filters/filtersSlice.js @@ -29,6 +29,7 @@ const initialState = { addedEnd: null, reviewed: null, custom: null, + comments: null, }, }; @@ -66,6 +67,10 @@ export const filtersSlice = createSlice({ state.activeFilters.custom = payload; }, + commentsFilterChanged: (state, { payload }) => { + state.activeFilters.comments = payload; + }, + dateFilterChanged: (state, { payload }) => { state.activeFilters[payload.type + 'Start'] = payload.startDate; state.activeFilters[payload.type + 'End'] = payload.endDate; @@ -188,6 +193,7 @@ export const { setActiveFilters, bulkSelectToggled, checkboxOnlyButtonClicked, + commentsFilterChanged, } = filtersSlice.actions; // Selectors @@ -206,5 +212,6 @@ export const selectDateCreatedFilter = (state) => ({ start: state.filters.activeFilters.createdStart, end: state.filters.activeFilters.createdEnd, }); +export const selectCommentsFilter = (state) => state.filters.activeFilters.comments; export default filtersSlice.reducer; diff --git a/src/features/projects/projectsMiddleware.js b/src/features/projects/projectsMiddleware.js index 5e0862b9..106f44c6 100644 --- a/src/features/projects/projectsMiddleware.js +++ b/src/features/projects/projectsMiddleware.js @@ -8,6 +8,7 @@ import { reviewedFilterToggled, selectActiveFilters, customFilterChanged, + commentsFilterChanged, checkboxOnlyButtonClicked, } from '../filters/filtersSlice'; import { @@ -72,6 +73,7 @@ export const diffFilters = (store) => (next) => (action) => { dateFilterChanged.match(action) || reviewedFilterToggled.match(action) || customFilterChanged.match(action) || + commentsFilterChanged.match(action) || setSelectedProjAndView.match(action) || editDeploymentsSuccess.match(action) || saveViewSuccess.match(action) ||