Fix privacy filter (#3472)

* Fix privacy filter * Release notes * Coderabbit suggestion * VRT * VRT * Revert VRT * VRT * VRT * VRT * VRT * Delete VRT * VRT * Revert VRT
actualbudget · Sep 23, 2024 · d1ecb3d · d1ecb3d
1 parent 90e2fe6
commit d1ecb3d
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 41 deletions.
diff --git a/packages/desktop-client/src/components/accounts/Balance.jsx b/packages/desktop-client/src/components/accounts/Balance.jsx
@@ -174,21 +174,19 @@ export function Balances({
       >
         <CellValue binding={{ ...balanceQuery, value: 0 }} type="financial">
           {props => (
-            <PrivacyFilter blurIntensity={5}>
-              <CellValueText
-                {...props}
-                style={{
-                  fontSize: 22,
-                  fontWeight: 400,
-                  color:
-                    props.value < 0
-                      ? theme.errorText
-                      : props.value > 0
-                        ? theme.noticeTextLight
-                        : theme.pageTextSubdued,
-                }}
-              />
-            </PrivacyFilter>
+            <CellValueText
+              {...props}
+              style={{
+                fontSize: 22,
+                fontWeight: 400,
+                color:
+                  props.value < 0
+                    ? theme.errorText
+                    : props.value > 0
+                      ? theme.noticeTextLight
+                      : theme.pageTextSubdued,
+              }}
+            />
           )}
         </CellValue>
 

diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -6,6 +6,8 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { css } from 'glamor';
+
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
 import { type CSSProperties, theme, styles } from '../../style';
@@ -177,16 +179,18 @@ export function BalanceWithCarryover({
                 type={type}
                 name={name}
                 value={balanceValue}
-                style={{
-                  ...getBalanceStyle(balanceValue),
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  textAlign: 'right',
-                  ...(!disabled && {
-                    cursor: 'pointer',
+                className={String(
+                  css({
+                    ...getBalanceStyle(balanceValue),
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    textAlign: 'right',
+                    ...(!disabled && {
+                      cursor: 'pointer',
+                    }),
+                    ':hover': { textDecoration: 'underline' },
                   }),
-                  ':hover': { textDecoration: 'underline' },
-                }}
+                )}
               />
             </Tooltip>
           )}

diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -1,5 +1,7 @@
 import React, { type ComponentProps, memo, useRef, useState } from 'react';
 
+import { css } from 'glamor';
+
 import { envelopeBudget } from 'loot-core/src/client/queries';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 import * as monthUtils from 'loot-core/src/shared/months';
@@ -359,11 +361,13 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                style={{
-                  cursor: 'pointer',
-                  ':hover': { textDecoration: 'underline' },
-                  ...makeAmountGrey(props.value),
-                }}
+                className={String(
+                  css({
+                    cursor: 'pointer',
+                    ':hover': { textDecoration: 'underline' },
+                    ...makeAmountGrey(props.value),
+                  }),
+                )}
               />
             )}
           </EnvelopeCellValue>
@@ -472,10 +476,12 @@ export function IncomeCategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                style={{
-                  cursor: 'pointer',
-                  ':hover': { textDecoration: 'underline' },
-                }}
+                className={String(
+                  css({
+                    cursor: 'pointer',
+                    ':hover': { textDecoration: 'underline' },
+                  }),
+                )}
               />
             )}
           </EnvelopeCellValue>

diff --git a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
@@ -2,6 +2,8 @@
 import React, { type ComponentProps, memo, useRef, useState } from 'react';
 import { Trans } from 'react-i18next';
 
+import { css } from 'glamor';
+
 import { trackingBudget } from 'loot-core/src/client/queries';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 import * as monthUtils from 'loot-core/src/shared/months';
@@ -370,13 +372,15 @@ export const CategoryMonth = memo(function CategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                style={{
-                  cursor: 'pointer',
-                  ':hover': {
-                    textDecoration: 'underline',
-                  },
-                  ...makeAmountGrey(props.value),
-                }}
+                className={String(
+                  css({
+                    cursor: 'pointer',
+                    ':hover': {
+                      textDecoration: 'underline',
+                    },
+                    ...makeAmountGrey(props.value),
+                  }),
+                )}
               />
             )}
           </TrackingCellValue>

diff --git a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
@@ -3,6 +3,7 @@ import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 
 import { type CSSProperties, styles } from '../../style';
 import { Text } from '../common/Text';
+import { PrivacyFilter } from '../PrivacyFilter';
 
 import { type FormatType, useFormat } from './useFormat';
 import { useSheetName } from './useSheetName';
@@ -51,6 +52,8 @@ export function CellValue<
   );
 }
 
+const PRIVACY_FILTER_TYPES = ['financial', 'financial-with-sign'];
+
 type CellValueTextProps<
   SheetName extends SheetNames,
   FieldName extends SheetFields<SheetName>,
@@ -87,7 +90,9 @@ export function CellValueText<
       data-cellname={name}
       {...props}
     >
-      {formatter ? formatter(value, type) : format(value, type)}
+      <PrivacyFilter activationFilters={[PRIVACY_FILTER_TYPES.includes(type)]}>
+        {formatter ? formatter(value, type) : format(value, type)}
+      </PrivacyFilter>
     </Text>
   );
 }
diff --git a/upcoming-release-notes/3472.md b/upcoming-release-notes/3472.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix privacy filters not activating