#245: add comments filter

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)));

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 (
+    <Accordion label="Comments" expandedDefault={false}>
+      <div>
+        <FormWrapper>
+          <Formik
+            enableReinitialize
+            initialValues={{ filter: commentsFilter || '' }}
+            onSubmit={(values) => handleCommentsFilterSubmit(values)}
+          >
+            <Form>
+              <StyledFieldRow>
+                <Field
+                  name="filter"
+                  id="filter"
+                  component="textarea"
+                  placeholder="Comments with the phrase..."
+                  onKeyDown={(e) => e.stopPropagation()}
+                  onKeyDownCapture={(e) => e.stopPropagation()}
+                />
+                <ErrorMessage component={FormError} name="filter" />
+              </StyledFieldRow>
+              <StyledButtonRow>
+                <Button type="button" size="small" onClick={handleRemoveButtonClick}>
+                  Remove
+                </Button>
+                <Button type="submit" size="small">
+                  Apply
+                </Button>
+              </StyledButtonRow>
+            </Form>
+          </Formik>
+        </FormWrapper>
+      </div>
+    </Accordion>
+  );
+}

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 }) => {
           <ReviewFilter/>
           <DateFilter type='created'/>
           <DateFilter type='added'/>
+          {hasRole(userRoles, QUERY_COMMENTS_ROLES) &&
+            <CommentsFilter />
+          }
           {hasRole(userRoles, QUERY_WITH_CUSTOM_FILTER) &&
             <CustomFilter />
           }
@@ -59,4 +63,4 @@ const FiltersPanel = ({ toggleFiltersPanel }) => {
   );
 }
 
-export default FiltersPanel;
+export default FiltersPanel;

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;

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) ||