Add: Flag to enable apollo devtools in production (#21094)

* Add: Flag to enable apollo devtools in production

* Fix: missing field

bigbluebutton-html5/imports/ui/Types/meetingClientSettings.ts

@@ -98,6 +98,7 @@ export interface App {
   fallbackOnEmptyLocaleString: boolean
   disableWebsocketFallback: boolean
   maxMutationPayloadSize: number
+  enableApolloDevTools: boolean
 }
 
 export interface BbbTabletApp {

bigbluebutton-html5/imports/ui/components/connection-manager/component.tsx

@@ -11,6 +11,7 @@ import apolloContextHolder from '../../core/graphql/apolloContextHolder/apolloCo
 import connectionStatus from '../../core/graphql/singletons/connectionStatus';
 import deviceInfo from '/imports/utils/deviceInfo';
 import BBBWeb from '/imports/api/bbb-web-api';
+import useMeetingSettings from '/imports/ui/core/local-states/useMeetingSettings';
 
 interface ConnectionManagerProps {
   children: React.ReactNode;
@@ -65,6 +66,9 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
   const tsLastPingMessageRef = useRef<number>(0);
   const boundary = useRef(15_000);
   const [terminalError, setTerminalError] = React.useState<string>('');
+  const [MeetingSettings] = useMeetingSettings();
+  const enableDevTools = MeetingSettings.public.app.enableApolloDevTools;
+
   useEffect(() => {
     BBBWeb.index().then(({ data }) => {
       setGraphqlUrl(data.graphqlWebsocketUrl);
@@ -206,7 +210,7 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
         client = new ApolloClient({
           link: wsLink,
           cache: new InMemoryCache(),
-          connectToDevTools: process.env.NODE_ENV === 'development',
+          connectToDevTools: (process.env.NODE_ENV === 'development') || enableDevTools,
         });
         setApolloClient(client);
         apolloContextHolder.setClient(client);

bigbluebutton-html5/imports/ui/core/initial-values/meetingClientSettings.ts

@@ -20,6 +20,7 @@ export const meetingClientSettingsInitialValues: MeetingClientSettings = {
       html5ClientBuild: 'HTML5_CLIENT_VERSION',
       helpLink: 'https://bigbluebutton.org/html5/',
       delayForUnmountOfSharedNote: 120000,
+      enableApolloDevTools: false,
       bbbTabletApp: {
         enabled: true,
         iosAppStoreUrl: 'https://apps.apple.com/us/app/bigbluebutton-tablet/id1641156756',

bigbluebutton-html5/private/config/settings.yml

@@ -83,6 +83,8 @@ public:
     allowFullscreen: true
     preloadNextSlides: 2
     warnAboutUnsavedContentOnMeetingEnd: false
+    # Flag used to enable apollo dev tools in production
+    enableApolloDevTools: false
     # Allows users to enable automatic transcription when joining a meeting.
     # Automatic transcription requires the browser to support the web
     # speech API, which involves sending voice data to third-party servers!