refactor: [M3-8981] - Use new preferences selector pattern in more pl…

…aces (#11459) * use selector pattern in most places * update mocked unit test * clean up profile settings * add unit testing * remove react scan before merging --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · Jan 2, 2025 · 1fd49e8 · 1fd49e8
1 parent 2e89ecc
commit 1fd49e8
Show file tree

Hide file tree

Showing 35 changed files with 574 additions and 229 deletions.
diff --git a/packages/manager/index.html b/packages/manager/index.html
@@ -11,4 +11,4 @@
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -50,17 +50,20 @@ export const Avatar = (props: AvatarProps) => {
 
   const theme = useTheme();
 
-  const { data: preferences } = usePreferences();
+  const { data: avatarColorPreference } = usePreferences(
+    (preferences) => preferences?.avatarColor
+  );
   const { data: profile } = useProfile();
 
   const _username = username ?? profile?.username ?? '';
   const isAkamai =
     _username === 'Akamai' || _username.startsWith('lke-service-account');
 
   const savedAvatarColor =
-    isAkamai || !preferences?.avatarColor
+    isAkamai || !avatarColorPreference
       ? theme.palette.primary.dark
-      : preferences.avatarColor;
+      : avatarColorPreference;
+
   const avatarLetter = _username[0]?.toUpperCase() ?? '';
 
   return (

diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx
@@ -41,10 +41,16 @@ export const DeletionDialog = React.memo((props: DeletionDialogProps) => {
     typeToConfirm,
     ...rest
   } = props;
-  const { data: preferences } = usePreferences();
+
+  const { data: typeToConfirmPreference } = usePreferences(
+    (preferences) => preferences?.type_to_confirm
+  );
+
   const [confirmationText, setConfirmationText] = React.useState('');
+
   const typeToConfirmRequired =
-    typeToConfirm && preferences?.type_to_confirm !== false;
+    typeToConfirm && typeToConfirmPreference !== false;
+
   const renderActions = () => (
     <ActionsPanel
       primaryButtonProps={{

diff --git a/packages/manager/src/components/MainContentBanner.tsx b/packages/manager/src/components/MainContentBanner.tsx
@@ -27,12 +27,14 @@ export const MainContentBanner = React.memo(() => {
 
   const flags = useFlags();
 
-  const { data: preferences } = usePreferences();
+  const { data: mainContentBannerPreferences } = usePreferences(
+    (preferences) => preferences?.main_content_banner_dismissal
+  );
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
   const handleDismiss = (key: string) => {
     const existingMainContentBannerDismissal =
-      preferences?.main_content_banner_dismissal ?? {};
+      mainContentBannerPreferences ?? {};
 
     updatePreferences({
       main_content_banner_dismissal: {
@@ -44,7 +46,7 @@ export const MainContentBanner = React.memo(() => {
 
   const hasDismissedBanner =
     flags.mainContentBanner?.key !== undefined &&
-    preferences?.main_content_banner_dismissal?.[flags.mainContentBanner.key];
+    mainContentBannerPreferences?.[flags.mainContentBanner.key];
 
   if (
     !flags.mainContentBanner ||

diff --git a/packages/manager/src/components/MaskableText/MaskableText.test.tsx b/packages/manager/src/components/MaskableText/MaskableText.test.tsx
@@ -18,9 +18,7 @@ describe('MaskableText', () => {
     text: plainText,
   };
 
-  const preferences: ManagerPreferences = {
-    maskSensitiveData: true,
-  };
+  const preference: ManagerPreferences['maskSensitiveData'] = true;
 
   const queryMocks = vi.hoisted(() => ({
     usePreferences: vi.fn().mockReturnValue({}),
@@ -35,12 +33,12 @@ describe('MaskableText', () => {
   });
 
   queryMocks.usePreferences.mockReturnValue({
-    data: preferences,
+    data: preference,
   });
 
   it('should render masked text if the maskSensitiveData preference is enabled', () => {
     queryMocks.usePreferences.mockReturnValue({
-      data: preferences,
+      data: preference,
     });
 
     const { getByText, queryByText } = renderWithTheme(
@@ -54,9 +52,7 @@ describe('MaskableText', () => {
 
   it('should not render masked text if the maskSensitiveData preference is disabled', () => {
     queryMocks.usePreferences.mockReturnValue({
-      data: {
-        maskSensitiveData: false,
-      },
+      data: false,
     });
 
     const { getByText, queryByText } = renderWithTheme(
@@ -70,9 +66,7 @@ describe('MaskableText', () => {
 
   it("should render MaskableText's children if the maskSensitiveData preference is disabled and children are provided", () => {
     queryMocks.usePreferences.mockReturnValue({
-      data: {
-        maskSensitiveData: false,
-      },
+      data: false,
     });
 
     const plainTextElement = <div>{plainText}</div>;
@@ -87,7 +81,7 @@ describe('MaskableText', () => {
 
   it('should render a toggleable VisibilityTooltip if isToggleable is provided', async () => {
     queryMocks.usePreferences.mockReturnValue({
-      data: preferences,
+      data: preference,
     });
 
     const { getByTestId, getByText } = renderWithTheme(

diff --git a/packages/manager/src/components/MaskableText/MaskableText.tsx b/packages/manager/src/components/MaskableText/MaskableText.tsx
@@ -27,10 +27,11 @@ export interface MaskableTextProps {
 }
 
 export const MaskableText = (props: MaskableTextProps) => {
-  const { children, isToggleable = false, text, length } = props;
+  const { children, isToggleable = false, length, text } = props;
 
-  const { data: preferences } = usePreferences();
-  const maskedPreferenceSetting = preferences?.maskSensitiveData;
+  const { data: maskedPreferenceSetting } = usePreferences(
+    (preferences) => preferences?.maskSensitiveData
+  );
 
   const [isMasked, setIsMasked] = React.useState(maskedPreferenceSetting);
 

diff --git a/packages/manager/src/components/OrderBy.test.tsx b/packages/manager/src/components/OrderBy.test.tsx
@@ -9,6 +9,8 @@ import {
   sortData,
 } from './OrderBy';
 
+import type { ManagerPreferences } from 'src/types/ManagerPreferences';
+
 const a = {
   age: 43,
   hobbies: ['this', 'that', 'the other'],
@@ -61,14 +63,13 @@ describe('OrderBy', () => {
   });
 
   describe('getInitialValuesFromUserPreferences', () => {
-    const preferences = {
-      sortKeys: {
-        ['listening-services']: {
-          order: 'desc' as any,
-          orderBy: 'test-order',
-        },
+    const preferences: ManagerPreferences['sortKeys'] = {
+      ['listening-services']: {
+        order: 'desc',
+        orderBy: 'test-order',
       },
     };
+
     it('should return values from query params if available', () => {
       expect(
         getInitialValuesFromUserPreferences(

diff --git a/packages/manager/src/components/OrderBy.tsx b/packages/manager/src/components/OrderBy.tsx
@@ -58,7 +58,7 @@ export type CombinedProps<T> = Props<T>;
  */
 export const getInitialValuesFromUserPreferences = (
   preferenceKey: string,
-  preferences: ManagerPreferences,
+  preferences: ManagerPreferences['sortKeys'],
   params: Record<string, string>,
   defaultOrderBy?: string,
   defaultOrder?: Order,
@@ -91,7 +91,7 @@ export const getInitialValuesFromUserPreferences = (
     };
   }
   return (
-    preferences?.sortKeys?.[preferenceKey] ?? {
+    preferences?.[preferenceKey] ?? {
       order: defaultOrder,
       orderBy: defaultOrderBy,
     }
@@ -156,15 +156,17 @@ export const sortData = <T,>(orderBy: string, order: Order) => {
 };
 
 export const OrderBy = <T,>(props: CombinedProps<T>) => {
-  const { data: preferences } = usePreferences();
+  const { data: sortPreferences } = usePreferences(
+    (preferences) => preferences?.sortKeys
+  );
   const { mutateAsync: updatePreferences } = useMutatePreferences();
   const location = useLocation();
   const history = useHistory();
   const params = getQueryParamsFromQueryString(location.search);
 
   const initialValues = getInitialValuesFromUserPreferences(
     props.preferenceKey ?? '',
-    preferences ?? {},
+    sortPreferences ?? {},
     params,
     props.orderBy,
     props.order
@@ -210,7 +212,7 @@ export const OrderBy = <T,>(props: CombinedProps<T>) => {
       if (props.preferenceKey) {
         updatePreferences({
           sortKeys: {
-            ...(preferences?.sortKeys ?? {}),
+            ...(sortPreferences ?? {}),
             [props.preferenceKey]: { order, orderBy },
           },
         });

diff --git a/packages/manager/src/components/PreferenceToggle/PreferenceToggle.tsx b/packages/manager/src/components/PreferenceToggle/PreferenceToggle.tsx
@@ -35,17 +35,19 @@ export const PreferenceToggle = <Key extends keyof ManagerPreferences>(
     value,
   } = props;
 
-  const { data: preferences } = usePreferences();
+  const { data: preference } = usePreferences(
+    (preferences) => preferences?.[preferenceKey]
+  );
 
   const { mutateAsync: updateUserPreferences } = useMutatePreferences();
 
   const togglePreference = () => {
     let newPreferenceToSet: ManagerPreferences[Key];
 
-    if (preferences?.[preferenceKey] === undefined) {
+    if (preference === undefined) {
       // Because we default to preferenceOptions[0], toggling with no preference should pick preferenceOptions[1]
       newPreferenceToSet = preferenceOptions[1];
-    } else if (preferences[preferenceKey] === preferenceOptions[0]) {
+    } else if (preference === preferenceOptions[0]) {
       newPreferenceToSet = preferenceOptions[1];
     } else {
       newPreferenceToSet = preferenceOptions[0];
@@ -64,7 +66,7 @@ export const PreferenceToggle = <Key extends keyof ManagerPreferences>(
   };
 
   return children({
-    preference: value ?? preferences?.[preferenceKey] ?? preferenceOptions[0]!,
+    preference: value ?? preference ?? preferenceOptions[0]!,
     togglePreference,
   });
 };
diff --git a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx
@@ -93,10 +93,14 @@ export const TypeToConfirmDialog = (props: CombinedProps) => {
 
   const [confirmText, setConfirmText] = React.useState('');
 
-  const { data: preferences } = usePreferences();
+  const { data: typeToConfirmPreference } = usePreferences(
+    (preferences) => preferences?.type_to_confirm
+  );
+
   const isPrimaryButtonDisabled =
-    (preferences?.type_to_confirm !== false && confirmText !== entity.name) ||
+    (typeToConfirmPreference !== false && confirmText !== entity.name) ||
     disableTypeToConfirmSubmit;
+
   const isTypeToConfirmInputDisabled = disableTypeToConfirmInput;
 
   React.useEffect(() => {
@@ -162,7 +166,7 @@ export const TypeToConfirmDialog = (props: CombinedProps) => {
         textFieldStyle={textFieldStyle}
         typographyStyle={typographyStyle}
         value={confirmText}
-        visible={preferences?.type_to_confirm}
+        visible={typeToConfirmPreference}
       />
     </ConfirmationDialog>
   );

diff --git a/packages/manager/src/features/Backups/BackupsCTA.tsx b/packages/manager/src/features/Backups/BackupsCTA.tsx
@@ -17,7 +17,9 @@ export const BackupsCTA = () => {
   const { data: accountSettings } = useAccountSettings();
   const { data: profile } = useProfile();
 
-  const { data: preferences } = usePreferences();
+  const { data: isBackupsBannerDismissed } = usePreferences(
+    (preferences) => preferences?.backups_cta_dismissed
+  );
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
   const [isBackupsDrawerOpen, setIsBackupsDrawerOpen] = React.useState(false);
@@ -36,7 +38,7 @@ export const BackupsCTA = () => {
     profile?.restricted ||
     accountSettings?.managed ||
     areAllLinodesBackedUp ||
-    preferences?.backups_cta_dismissed
+    isBackupsBannerDismissed
   ) {
     return null;
   }

diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx
@@ -72,7 +72,9 @@ export const ContactInformation = React.memo((props: Props) => {
 
   const { data: notifications } = useNotificationsQuery();
 
-  const { data: preferences } = usePreferences();
+  const { data: maskSensitiveDataPreference } = usePreferences(
+    (preferences) => preferences?.maskSensitiveData
+  );
 
   const [focusEmail, setFocusEmail] = React.useState(false);
 
@@ -118,7 +120,7 @@ export const ContactInformation = React.memo((props: Props) => {
   }, [editContactDrawerOpen, history.location.state]);
 
   const [isContactInfoMasked, setIsContactInfoMasked] = useState(
-    preferences?.maskSensitiveData
+    maskSensitiveDataPreference
   );
 
   /**
@@ -176,7 +178,7 @@ export const ContactInformation = React.memo((props: Props) => {
                 {EDIT_BILLING_CONTACT}
               </BillingActionButton>
             )}
-            {preferences?.maskSensitiveData && (
+            {maskSensitiveDataPreference && (
               <BillingActionButton
                 disableFocusRipple
                 disableRipple
@@ -195,7 +197,7 @@ export const ContactInformation = React.memo((props: Props) => {
             )}
           </Box>
         </BillingBox>
-        {preferences?.maskSensitiveData && isContactInfoMasked ? (
+        {maskSensitiveDataPreference && isContactInfoMasked ? (
           <Typography>
             This data is sensitive and hidden for privacy. To unmask all
             sensitive data by default, go to{' '}

diff --git a/...ages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx b/...ages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx
@@ -44,7 +44,9 @@ export const NodeRow = React.memo((props: NodeRowProps) => {
   } = props;
 
   const { data: events } = useInProgressEvents();
-  const { data: preferences } = usePreferences();
+  const { data: maskSensitiveDataPreference } = usePreferences(
+    (preferences) => preferences?.maskSensitiveData
+  );
 
   const recentEvent = events?.find(
     (event) =>
@@ -123,7 +125,7 @@ export const NodeRow = React.memo((props: NodeRowProps) => {
           >
             <CopyTooltip
               copyableText
-              masked={Boolean(preferences?.maskSensitiveData)}
+              masked={Boolean(maskSensitiveDataPreference)}
               maskedTextLength="ipv4"
               text={displayIP}
             />
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,4 +11,4 @@ @@
         <div id="root"></div>
         <script type="module" src="/src/index.tsx"></script>
       </body>
-    </html>
+    </html>