Add temporary appview-proxy header toggle (#874)

src/lib/api/debug-appview-proxy-header.ts

@@ -0,0 +1,57 @@
+/**
+ * APP-700
+ *
+ * This is a temporary debug setting we're running on the Web build to
+ * help the protocol team test some changes.
+ *
+ * It should be removed in ~2 weeks. It should only be used on the Web
+ * version of the app.
+ */
+
+import {useState, useCallback} from 'react'
+import {BskyAgent} from '@atproto/api'
+import {isWeb} from 'platform/detection'
+
+export function useDebugHeaderSetting(agent: BskyAgent): [boolean, () => void] {
+  const [enabled, setEnabled] = useState<boolean>(isEnabled())
+
+  const toggle = useCallback(() => {
+    if (!enabled) {
+      localStorage.setItem('set-header-x-appview-proxy', 'yes')
+      agent.api.xrpc.setHeader('x-appview-proxy', 'true')
+      setEnabled(true)
+    } else {
+      localStorage.removeItem('set-header-x-appview-proxy')
+      agent.api.xrpc.unsetHeader('x-appview-proxy')
+      setEnabled(false)
+    }
+  }, [setEnabled, enabled, agent])
+
+  return [enabled, toggle]
+}
+
+export function setDebugHeader(agent: BskyAgent, enabled: boolean) {
+  if (!isWeb) {
+    return
+  }
+  if (enabled) {
+    localStorage.setItem('set-header-x-appview-proxy', 'yes')
+    agent.api.xrpc.setHeader('x-appview-proxy', 'true')
+  } else {
+    localStorage.removeItem('set-header-x-appview-proxy')
+    agent.api.xrpc.unsetHeader('x-appview-proxy')
+  }
+}
+
+export function applyDebugHeader(agent: BskyAgent) {
+  if (!isWeb) {
+    return
+  }
+  if (isEnabled()) {
+    agent.api.xrpc.setHeader('x-appview-proxy', 'true')
+  }
+}
+
+function isEnabled() {
+  return localStorage.getItem('set-header-x-appview-proxy') === 'yes'
+}

src/state/models/root-store.ts

@@ -23,6 +23,11 @@ import {ImageSizesCache} from './cache/image-sizes'
 import {MutedThreads} from './muted-threads'
 import {reset as resetNavigation} from '../../Navigation'
 
+// TEMPORARY (APP-700)
+// remove after backend testing finishes
+// -prf
+import {applyDebugHeader} from 'lib/api/debug-appview-proxy-header'
+
 export const appInfo = z.object({
   build: z.string(),
   name: z.string(),
@@ -125,6 +130,7 @@ export class RootStoreModel {
   ) {
     this.log.debug('RootStoreModel:handleSessionChange')
     this.agent = agent
+    applyDebugHeader(this.agent)
     this.me.clear()
     /* dont await */ this.preferences.sync()
     await this.me.load()

src/view/screens/Settings.tsx

@@ -31,6 +31,7 @@ import {Text} from '../com/util/text/Text'
 import * as Toast from '../com/util/Toast'
 import {UserAvatar} from '../com/util/UserAvatar'
 import {DropdownButton} from 'view/com/util/forms/DropdownButton'
+import {ToggleButton} from 'view/com/util/forms/ToggleButton'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useCustomPalette} from 'lib/hooks/useCustomPalette'
 import {AccountData} from 'state/models/session'
@@ -42,6 +43,11 @@ import {formatCount} from 'view/com/util/numeric/format'
 import {isColorMode} from 'state/models/ui/shell'
 import Clipboard from '@react-native-clipboard/clipboard'
 
+// TEMPORARY (APP-700)
+// remove after backend testing finishes
+// -prf
+import {useDebugHeaderSetting} from 'lib/api/debug-appview-proxy-header'
+
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export const SettingsScreen = withAuthRequired(
   observer(function Settings({}: Props) {
@@ -50,6 +56,9 @@ export const SettingsScreen = withAuthRequired(
     const navigation = useNavigation<NavigationProp>()
     const {screen, track} = useAnalytics()
     const [isSwitching, setIsSwitching] = React.useState(false)
+    const [debugHeaderEnabled, toggleDebugHeader] = useDebugHeaderSetting(
+      store.agent,
+    )
 
     const primaryBg = useCustomPalette<ViewStyle>({
       light: {backgroundColor: colors.blue0},
@@ -435,23 +444,33 @@ export const SettingsScreen = withAuthRequired(
               System log
             </Text>
           </Link>
-          <Link
-            style={[pal.view, styles.linkCardNoIcon]}
-            href="/sys/debug"
-            title="Debug tools">
-            <Text type="lg" style={pal.text}>
-              Storybook
-            </Text>
-          </Link>
+          {isDesktopWeb ? (
+            <ToggleButton
+              type="default-light"
+              label="Experiment: Use AppView Proxy"
+              isSelected={debugHeaderEnabled}
+              onPress={toggleDebugHeader}
+            />
+          ) : null}
           {__DEV__ ? (
-            <Link
-              style={[pal.view, styles.linkCardNoIcon]}
-              onPress={onPressResetPreferences}
-              title="Debug tools">
-              <Text type="lg" style={pal.text}>
-                Reset preferences state
-              </Text>
-            </Link>
+            <>
+              <Link
+                style={[pal.view, styles.linkCardNoIcon]}
+                href="/sys/debug"
+                title="Debug tools">
+                <Text type="lg" style={pal.text}>
+                  Storybook
+                </Text>
+              </Link>
+              <Link
+                style={[pal.view, styles.linkCardNoIcon]}
+                onPress={onPressResetPreferences}
+                title="Debug tools">
+                <Text type="lg" style={pal.text}>
+                  Reset preferences state
+                </Text>
+              </Link>
+            </>
           ) : null}
           <TouchableOpacity
             accessibilityRole="button"