From f560015986c3e9585d6f2b8b58e2fb6664ab8d0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20L=C3=B6thberg?= <johannes@kyriasis.com>
Date: Wed, 13 Sep 2023 19:11:56 +0200
Subject: [PATCH] Hide hidden groups and categories in spending report category
 selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 .../components/reports/CategorySelector.tsx   | 219 +++++++++---------
 upcoming-release-notes/1696.md                |   6 +
 2 files changed, 119 insertions(+), 106 deletions(-)
 create mode 100644 upcoming-release-notes/1696.md

diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
index 8dc2da84dab..d8ecbba27d9 100644
--- a/packages/desktop-client/src/components/reports/CategorySelector.tsx
+++ b/packages/desktop-client/src/components/reports/CategorySelector.tsx
@@ -53,117 +53,124 @@ export default function CategorySelector({
         }}
       >
         {categoryGroups &&
-          categoryGroups.map(categoryGroup => {
-            const allCategoriesInGroupSelected = categoryGroup.categories.every(
-              category =>
-                selectedCategories.some(
-                  selectedCategory => selectedCategory.id === category.id,
-                ),
-            );
-            const noCategorySelected = categoryGroup.categories.every(
-              category =>
-                !selectedCategories.some(
-                  selectedCategory => selectedCategory.id === category.id,
-                ),
-            );
-            return (
-              <Fragment key={categoryGroup.id}>
-                <li
-                  style={{
-                    display:
-                      noCategorySelected && uncheckedHidden ? 'none' : 'flex',
-                    marginBottom: 8,
-                    flexDirection: 'row',
-                  }}
-                >
-                  <Checkbox
-                    id={`form_${categoryGroup.id}`}
-                    checked={allCategoriesInGroupSelected}
-                    onChange={e => {
-                      const selectedCategoriesExcludingGroupCategories =
-                        selectedCategories.filter(
-                          selectedCategory =>
-                            !categoryGroup.categories.some(
-                              groupCategory =>
-                                groupCategory.id === selectedCategory.id,
-                            ),
-                        );
-                      if (allCategoriesInGroupSelected) {
-                        setSelectedCategories(
-                          selectedCategoriesExcludingGroupCategories,
-                        );
-                      } else {
-                        setSelectedCategories(
-                          selectedCategoriesExcludingGroupCategories.concat(
-                            categoryGroup.categories,
-                          ),
-                        );
-                      }
-                    }}
-                  />
-                  <label
-                    htmlFor={`form_${categoryGroup.id}`}
-                    style={{ userSelect: 'none', fontWeight: 'bold' }}
-                  >
-                    {categoryGroup.name}
-                  </label>
-                </li>
-                <li>
-                  <ul
+          categoryGroups
+            .filter(categoryGroup => !categoryGroup.hidden)
+            .map(categoryGroup => {
+              const visibleCategories = categoryGroup.categories.filter(
+                category => !category.hidden,
+              );
+
+              const allCategoriesInGroupSelected = visibleCategories.every(
+                category =>
+                  selectedCategories.some(
+                    selectedCategory => selectedCategory.id === category.id,
+                  ),
+              );
+              const noCategorySelected = visibleCategories.every(
+                category =>
+                  !selectedCategories.some(
+                    selectedCategory => selectedCategory.id === category.id,
+                  ),
+              );
+              return (
+                <Fragment key={categoryGroup.id}>
+                  <li
                     style={{
-                      listStyle: 'none',
-                      marginLeft: 0,
-                      marginBottom: 10,
-                      paddingLeft: 10,
+                      display:
+                        noCategorySelected && uncheckedHidden ? 'none' : 'flex',
+                      marginBottom: 8,
+                      flexDirection: 'row',
                     }}
                   >
-                    {categoryGroup.categories.map((category, index) => {
-                      const isChecked = selectedCategories.some(
-                        selectedCategory => selectedCategory.id === category.id,
-                      );
-                      return (
-                        <li
-                          key={category.id}
-                          style={{
-                            display:
-                              !isChecked && uncheckedHidden ? 'none' : 'flex',
-                            flexDirection: 'row',
-                            marginBottom: 4,
-                          }}
-                        >
-                          <Checkbox
-                            id={`form_${category.id}`}
-                            checked={isChecked}
-                            onChange={e => {
-                              if (isChecked) {
-                                setSelectedCategories(
-                                  selectedCategories.filter(
-                                    selectedCategory =>
-                                      selectedCategory.id !== category.id,
-                                  ),
-                                );
-                              } else {
-                                setSelectedCategories([
-                                  ...selectedCategories,
-                                  category,
-                                ]);
-                              }
+                    <Checkbox
+                      id={`form_${categoryGroup.id}`}
+                      checked={allCategoriesInGroupSelected}
+                      onChange={e => {
+                        const selectedCategoriesExcludingGroupCategories =
+                          selectedCategories.filter(
+                            selectedCategory =>
+                              !visibleCategories.some(
+                                groupCategory =>
+                                  groupCategory.id === selectedCategory.id,
+                              ),
+                          );
+                        if (allCategoriesInGroupSelected) {
+                          setSelectedCategories(
+                            selectedCategoriesExcludingGroupCategories,
+                          );
+                        } else {
+                          setSelectedCategories(
+                            selectedCategoriesExcludingGroupCategories.concat(
+                              visibleCategories,
+                            ),
+                          );
+                        }
+                      }}
+                    />
+                    <label
+                      htmlFor={`form_${categoryGroup.id}`}
+                      style={{ userSelect: 'none', fontWeight: 'bold' }}
+                    >
+                      {categoryGroup.name}
+                    </label>
+                  </li>
+                  <li>
+                    <ul
+                      style={{
+                        listStyle: 'none',
+                        marginLeft: 0,
+                        marginBottom: 10,
+                        paddingLeft: 10,
+                      }}
+                    >
+                      {visibleCategories.map((category, index) => {
+                        const isChecked = selectedCategories.some(
+                          selectedCategory =>
+                            selectedCategory.id === category.id,
+                        );
+                        return (
+                          <li
+                            key={category.id}
+                            style={{
+                              display:
+                                !isChecked && uncheckedHidden ? 'none' : 'flex',
+                              flexDirection: 'row',
+                              marginBottom: 4,
                             }}
-                          />
-                          <label
-                            htmlFor={`form_${category.id}`}
-                            style={{ userSelect: 'none' }}
                           >
-                            {category.name}
-                          </label>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </li>
-              </Fragment>
-            );
-          })}
+                            <Checkbox
+                              id={`form_${category.id}`}
+                              checked={isChecked}
+                              onChange={e => {
+                                if (isChecked) {
+                                  setSelectedCategories(
+                                    selectedCategories.filter(
+                                      selectedCategory =>
+                                        selectedCategory.id !== category.id,
+                                    ),
+                                  );
+                                } else {
+                                  setSelectedCategories([
+                                    ...selectedCategories,
+                                    category,
+                                  ]);
+                                }
+                              }}
+                            />
+                            <label
+                              htmlFor={`form_${category.id}`}
+                              style={{ userSelect: 'none' }}
+                            >
+                              {category.name}
+                            </label>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </li>
+                </Fragment>
+              );
+            })}
       </ul>
     </>
   );
diff --git a/upcoming-release-notes/1696.md b/upcoming-release-notes/1696.md
new file mode 100644
index 00000000000..357f0764385
--- /dev/null
+++ b/upcoming-release-notes/1696.md
@@ -0,0 +1,6 @@
+---
+category: Enhancement
+authors: [kyrias]
+---
+
+Hide hidden groups and categories from spending report category selector.