9625404872

Committed 22 Jun 2024 12:19PM UTC coverage: 96.994% (-0.01%) from 97.005%

Build # 9625404872

Build Type

Pull #1304

github

Committed by

web-flow

Commit Message

Merge 7fd426229 into a8dc8eea5

Pull Request Pull Request #1304: feat: new filters route

Run Details

507 of 520 branches covered (97.5%)

Branch coverage included in aggregate %.

45 of 46 new or added lines in 5 files covered. (97.83%)

16 existing lines in 1 file now uncovered.

1300 of 1343 relevant lines covered (96.8%)

25.53 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

94.59

/src/routes/Filters.tsx

import { FilterRemoveIcon } from '@primer/octicons-react';
import { type FC, useContext } from 'react';
import { Header } from '../components/Header';
import { Checkbox } from '../components/fields/Checkbox';
import { AppContext, defaultSettings } from '../context/App';
import { BUTTON_CLASS_NAME } from '../styles/gitify';
import { Size } from '../types';
import type { Reason } from '../typesGitHub';
import { FORMATTED_REASONS, formatReason } from '../utils/reason';

export const FiltersRoute: FC = () => {
  const { settings, updateSetting } = useContext(AppContext);

  const updateReasonFilter = (reason: Reason, checked: boolean) => {
    let reasons: Reason[];

    if (!settings.filterReasons) {
      reasons = [];
    } else {
      reasons = settings.filterReasons.split(',') as Reason[];
    }

    if (checked) {
      reasons.push(reason);
    } else {
      reasons = reasons.filter((r) => r !== reason);
    }

    updateSetting('filterReasons', reasons.join(','));
  };

  const shouldShowReason = (reason: Reason) => {
    return settings.filterReasons.split(',').includes(reason);
  };

  const resetToDefaultFilters = () => {
    updateSetting('filterReasons', defaultSettings.filterReasons);
    updateSetting('showBots', defaultSettings.showBots);
  };

  return (
    <div className="flex h-screen flex-col" data-testid="filters">
      <Header>Filters</Header>
      <div className="flex-grow overflow-x-auto px-8">
        <fieldset className="mb-3">
          <legend id="notifications" className="mb-1 mt-2 font-semibold">
            Users
          </legend>
          <Checkbox
            name="showBots"
            label="Show notifications from Bot accounts"
            checked={!settings.detailedNotifications || settings.showBots}
            onChange={(evt) =>
              settings.detailedNotifications &&
              updateSetting('showBots', evt.target.checked)
            }
            disabled={!settings.detailedNotifications}
            tooltip={
              <div>
                <div className="pb-3">
                  Show or hide notifications from Bot accounts, such as
                  @dependabot, @renovatebot, etc
                </div>
                <div className="text-orange-600">
                  ⚠️ This filter requires the{' '}
                  <strong>Detailed Notifications</strong> setting to be enabled.
                </div>
              </div>
            }
          />
        </fieldset>

        <fieldset className="mb-3">
          <legend id="appearance" className="mb-1 mt-2 font-semibold">
            Reason
          </legend>
          <span className="text-xs italic">
            Note: if no reasons are selected, all notifications will be shown.
          </span>
          {Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
            return (
              <Checkbox
                key={reason}
                name={reason}
                label={formatReason(reason).title}
                checked={shouldShowReason(reason)}
                onChange={(evt) =>
                  updateReasonFilter(reason, evt.target.checked)
                }
                tooltip={<div>{formatReason(reason).description}</div>}
              />
            );
          })}
        </fieldset>
      </div>

      <div className="flex items-center justify-between bg-gray-200 px-3 py-1 text-sm dark:bg-gray-darker">
        <div>
          <button
            type="button"
            className={BUTTON_CLASS_NAME}
            title="Reset to default filters"
            onClick={resetToDefaultFilters}
          >
            <FilterRemoveIcon
              size={Size.LARGE}
              className="mr-2"
              aria-label="Reset to default filters"
            />
            Reset to default filters
          </button>
        </div>
      </div>
    </div>
  );
};

1	import { FilterRemoveIcon } from '@primer/octicons-react';	2✔
2	import { type FC, useContext } from 'react';	2✔
3	import { Header } from '../components/Header';	2✔
4	import { Checkbox } from '../components/fields/Checkbox';	2✔
5	import { AppContext, defaultSettings } from '../context/App';	2✔
6	import { BUTTON_CLASS_NAME } from '../styles/gitify';	2✔
7	import { Size } from '../types';	2✔
8	import type { Reason } from '../typesGitHub';
9	import { FORMATTED_REASONS, formatReason } from '../utils/reason';	2✔
10
11	export const FiltersRoute: FC = () => {	2✔
12	const { settings, updateSetting } = useContext(AppContext);	14✔
13
14	const updateReasonFilter = (reason: Reason, checked: boolean) => {	14✔
15	let reasons: Reason[];
16
17	if (!settings.filterReasons) {	4✔
18	reasons = [];	2✔
19	} else {
20	reasons = settings.filterReasons.split(',') as Reason[];	2✔
21	}
22
23	if (checked) {	4!
24	reasons.push(reason);	4✔
25	} else {
NEW 26	reasons = reasons.filter((r) => r !== reason);	×
27	}
28
29	updateSetting('filterReasons', reasons.join(','));	4✔
30	};
31
32	const shouldShowReason = (reason: Reason) => {	14✔
33	return settings.filterReasons.split(',').includes(reason);	210✔
34	};
35
36	const resetToDefaultFilters = () => {	14✔
37	updateSetting('filterReasons', defaultSettings.filterReasons);	2✔
38	updateSetting('showBots', defaultSettings.showBots);	2✔
39	};
40
41	return (	14✔
42	<div className="flex h-screen flex-col" data-testid="filters">
43	<Header>Filters</Header>
44	<div className="flex-grow overflow-x-auto px-8">
45	<fieldset className="mb-3">
46	<legend id="notifications" className="mb-1 mt-2 font-semibold">
47	Users
48	</legend>
49	<Checkbox
50	name="showBots"
51	label="Show notifications from Bot accounts"
52	checked={!settings.detailedNotifications \|\| settings.showBots}	13✔
53	onChange={(evt) =>
54	settings.detailedNotifications &&	4✔
55	updateSetting('showBots', evt.target.checked)
56	}
57	disabled={!settings.detailedNotifications}
58	tooltip={
59	<div>
60	<div className="pb-3">
61	Show or hide notifications from Bot accounts, such as
62	@dependabot, @renovatebot, etc
63	</div>
64	<div className="text-orange-600">
65	⚠️ This filter requires the{' '}
66	<strong>Detailed Notifications</strong> setting to be enabled.
67	</div>
68	</div>
69	}
70	/>
71	</fieldset>
72
73	<fieldset className="mb-3">
74	<legend id="appearance" className="mb-1 mt-2 font-semibold">
75	Reason
76	</legend>
77	<span className="text-xs italic">
78	Note: if no reasons are selected, all notifications will be shown.
79	</span>
80	{Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
81	return (	210✔
82	<Checkbox
83	key={reason}
84	name={reason}
85	label={formatReason(reason).title}
86	checked={shouldShowReason(reason)}
87	onChange={(evt) =>
88	updateReasonFilter(reason, evt.target.checked)	4✔
89	}
90	tooltip={<div>{formatReason(reason).description}</div>}
91	/>
92	);
93	})}
94	</fieldset>
95	</div>
96
97	<div className="flex items-center justify-between bg-gray-200 px-3 py-1 text-sm dark:bg-gray-darker">
98	<div>
99	<button
100	type="button"
101	className={BUTTON_CLASS_NAME}
102	title="Reset to default filters"
103	onClick={resetToDefaultFilters}
104	>
105	<FilterRemoveIcon
106	size={Size.LARGE}
107	className="mr-2"
108	aria-label="Reset to default filters"
109	/>
110	Reset to default filters
111	</button>
112	</div>
113	</div>
114	</div>
115	);
116	};

gitify-app / gitify / 9625404872

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous