Add "should show badges" feature flag

ts/RemoteConfig.ts

@@ -24,6 +24,7 @@ export type ConfigKeyType =
   | 'desktop.senderKey.send'
   | 'desktop.senderKey.retry'
   | 'desktop.sendSenderKey3'
+  | 'desktop.showUserBadges'
   | 'desktop.storage'
   | 'desktop.storageWrite3'
   | 'desktop.usernames'

ts/badges/shouldShowBadges.ts

@@ -0,0 +1,16 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { isEnabled } from '../RemoteConfig';
+import { getEnvironment, Environment } from '../environment';
+
+export function shouldShowBadges(): boolean {
+  return (
+    isEnabled('desktop.showUserBadges') ||
+    isEnabled('desktop.internalUser') ||
+    getEnvironment() === Environment.Staging ||
+    getEnvironment() === Environment.Development ||
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Boolean((window as any).STORYBOOK_ENV)
+  );
+}

ts/components/Avatar.tsx

@@ -24,6 +24,7 @@ import { shouldBlurAvatar } from '../util/shouldBlurAvatar';
 import { getBadgeImageFileLocalPath } from '../badges/getBadgeImageFileLocalPath';
 import { isBadgeVisible } from '../badges/isBadgeVisible';
 import { BadgeImageTheme } from '../badges/BadgeImageTheme';
+import { shouldShowBadges } from '../badges/shouldShowBadges';
 
 export enum AvatarBlur {
   NoBlur,
@@ -213,7 +214,13 @@ export const Avatar: FunctionComponent<Props> = ({
   }
 
   let badgeNode: ReactNode;
-  if (badge && theme && !noteToSelf && isBadgeVisible(badge)) {
+  if (
+    badge &&
+    theme &&
+    !noteToSelf &&
+    isBadgeVisible(badge) &&
+    shouldShowBadges()
+  ) {
     const badgeSize = Math.ceil(size * 0.425);
     const badgeTheme =
       theme === ThemeType.light ? BadgeImageTheme.Light : BadgeImageTheme.Dark;

ts/components/conversation/ContactModal.tsx

@@ -14,6 +14,7 @@ import { BadgeDialog } from '../BadgeDialog';
 import type { BadgeType } from '../../badges/types';
 import { SharedGroupNames } from '../SharedGroupNames';
 import { ConfirmationDialog } from '../ConfirmationDialog';
+import { shouldShowBadges } from '../../badges/shouldShowBadges';
 
 export type PropsDataType = {
   areWeAdmin: boolean;
@@ -105,7 +106,7 @@ export const ContactModal = ({
               unblurredAvatarPath={contact.unblurredAvatarPath}
               onClick={() => {
                 setView(
-                  preferredBadge
+                  preferredBadge && shouldShowBadges()
                     ? ContactModalView.ShowingBadges
                     : ContactModalView.ShowingAvatar
                 );

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -15,6 +15,7 @@ import type { LocalizerType, ThemeType } from '../../../types/Util';
 import { bemGenerator } from './util';
 import { BadgeDialog } from '../../BadgeDialog';
 import type { BadgeType } from '../../../badges/types';
+import { shouldShowBadges } from '../../../badges/shouldShowBadges';
 
 export type Props = {
   badges?: ReadonlyArray<BadgeType>;
@@ -92,7 +93,7 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
       noteToSelf={isMe}
       onClick={() => {
         setActiveModal(
-          preferredBadge
+          preferredBadge && shouldShowBadges()
             ? ConversationDetailsHeaderActiveModal.ShowingBadges
             : ConversationDetailsHeaderActiveModal.ShowingAvatar
         );