feat(filters-drawer): add read-unread filter

src/locales/en/translation.json

@@ -76,6 +76,7 @@
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_LESS_LABEL": "Show less",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_MORE_LABEL": "Show <2>{{os}}</2> more OS",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_TITLE": "OS",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_READ_TITLE": "Reading",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_ALL_LABEL": "All replicabilities",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_SHOW_LESS_LABEL": "Show less",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_SHOW_MORE_LABEL": "Show <2>{{replicabilities}}</2> more replicabilities",

src/locales/it/translation.json

@@ -78,6 +78,7 @@
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_LESS_LABEL": "",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_MORE_LABEL": "Show <2>{{os}}</2> more OS",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_TITLE": "",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_READ_TITLE": "",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_ALL_LABEL": "",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_SHOW_LESS_LABEL": "",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_SHOW_MORE_LABEL": "Show <2>{{replicabilities}}</2> more replicabilities",

src/pages/Bugs/Drawer/ReadField.tsx

@@ -0,0 +1,84 @@
+import { Accordion, MD, Radio, SM } from '@appquality/unguess-design-system';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from 'src/app/hooks';
+import { theme as globalTheme } from 'src/app/theme';
+import { Field } from '@zendeskgarden/react-forms';
+import { updateFilters } from 'src/features/bugsPage/bugsPageSlice';
+import { Divider } from 'src/common/components/divider';
+import { ReadFilterType } from 'src/features/bugsPage/readFilter';
+import { useFilterData } from './useFilterData';
+import { disabledStyle, LabelSpaceBetween } from './LabelWithCounter';
+
+export const ReadField = ({ read }: { read: ReadFilterType['read'] }) => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const { counters } = useFilterData('read');
+  const { available, selected } = read;
+
+  if (!counters) return null;
+
+  return (
+    <>
+      <Accordion level={3}>
+        <Accordion.Section>
+          <Accordion.Header>
+            <Accordion.Label>
+              <MD isBold style={{ marginBottom: globalTheme.space.xxs }}>
+                {t('__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_READ_TITLE')}
+              </MD>
+              <SM
+                style={{
+                  color: globalTheme.palette.grey[600],
+                  textTransform: 'capitalize',
+                }}
+              >
+                {selected === 'unread'
+                  ? t('__BUGS_READ_FILTER_ITEM_UNREAD')
+                  : t('__BUGS_READ_FILTER_ITEM_ALL')}
+              </SM>
+            </Accordion.Label>
+          </Accordion.Header>
+          <Accordion.Panel>
+            {available.map((item) => (
+              <Field
+                style={{
+                  marginBottom: globalTheme.space.xxs,
+                }}
+              >
+                <Radio
+                  value={item}
+                  name="filter-read"
+                  disabled={!counters[item as string]}
+                  checked={selected && selected === item}
+                  onChange={() => {
+                    dispatch(
+                      updateFilters({
+                        filters: {
+                          read: item,
+                        },
+                      })
+                    );
+                  }}
+                >
+                  <LabelSpaceBetween
+                    isRegular
+                    style={{
+                      textTransform: 'capitalize',
+                      ...(!counters[item as string] && disabledStyle),
+                    }}
+                  >
+                    {item === 'unread'
+                      ? t('__BUGS_READ_FILTER_ITEM_UNREAD')
+                      : t('__BUGS_READ_FILTER_ITEM_PLACEHOLDER')}
+                    <MD>{counters[item as string] || 0}</MD>
+                  </LabelSpaceBetween>
+                </Radio>
+              </Field>
+            ))}
+          </Accordion.Panel>
+        </Accordion.Section>
+      </Accordion>
+      <Divider />
+    </>
+  );
+};

src/pages/Bugs/Drawer/index.tsx

@@ -17,6 +17,7 @@ import styled from 'styled-components';
 import { useCampaignBugs } from '../BugsTable/hooks/useCampaignBugs';
 import { DeviceField } from './DeviceField';
 import { OsField } from './OsField';
+import { ReadField } from './ReadField';
 import { ReplicabilityField } from './ReplicabilityField';
 import { SeverityField } from './SeverityField';
 import { TagField } from './TagField';
@@ -65,6 +66,7 @@ const BugsFilterDrawer = () => {
     devices,
     os,
     replicabilities,
+    read,
   } = campaignData;
 
   const memoizedFilters = useMemo(
@@ -79,7 +81,8 @@ const BugsFilterDrawer = () => {
         >
           {t('__BUGS_PAGE_FILTER_DRAWER_BODY_COMMON_LABEL')}
         </MD>
-        {unique.available.length ? <UniqueField unique={unique} /> : null}
+        <UniqueField unique={unique} />
+        <ReadField read={read} />
         {severities.available.length ? (
           <SeverityField severities={severities} />
         ) : null}

src/pages/Bugs/Drawer/useFilterData.ts

@@ -73,8 +73,8 @@ export const useFilterData = (filter: Filter) => {
         } else if (filter === 'severities') {
           acc[bug.severity.id] = (acc[bug.severity.id] || 0) + 1;
         } else if (filter === 'read') {
-          acc[bug.read ? 'read' : 'unread'] =
-            (acc[bug.read ? 'read' : 'unread'] || 0) + 1;
+          acc[bug.read ? 'all' : 'unread'] =
+            (acc[bug.read ? 'all' : 'unread'] || 0) + 1;
         } else if (filter === 'unique') {
           if (!bug.duplicated_of_id) {
             acc.unique = (acc.unique || 0) + 1;