fix: move feature flag component into a separate file

ts/components/dialog/debug/DebugMenuModal.tsx

@@ -4,8 +4,9 @@ import { useDispatch } from 'react-redux';
 import { Flex } from '../../basic/Flex';
 import { SpacerMD, SpacerSM } from '../../basic/Text';
 import { updateDebugMenuModal } from '../../../state/ducks/modalDialog';
-import { AboutInfo, DebugActions, FeatureFlags, OtherInfo } from './components';
+import { AboutInfo, DebugActions, OtherInfo } from './components';
 import { SessionWrapperModal } from '../../SessionWrapperModal';
+import { FeatureFlags } from './FeatureFlags';
 
 const StyledContent = styled(Flex)`
   padding-inline: var(--margins-sm);

ts/components/dialog/debug/FeatureFlags.tsx

@@ -0,0 +1,111 @@
+import { isBoolean } from 'lodash';
+import useUpdate from 'react-use/lib/useUpdate';
+import type { SessionFeatureFlagsKeys } from '../../../window';
+import { Flex } from '../../basic/Flex';
+import { SessionToggle } from '../../basic/SessionToggle';
+import { HintText, SpacerXS } from '../../basic/Text';
+
+const unsupportedFlags = ['useTestNet'];
+const untestedFlags = ['useOnionRequests', 'useClosedGroupV3', 'replaceLocalizedStringsWithKeys'];
+
+const handleFeatureFlagToggle = async (
+  forceUpdate: () => void,
+  flag: SessionFeatureFlagsKeys,
+  parentFlag?: SessionFeatureFlagsKeys
+) => {
+  const currentValue = parentFlag
+    ? (window as any).sessionFeatureFlags[parentFlag][flag]
+    : (window as any).sessionFeatureFlags[flag];
+
+  if (parentFlag) {
+    (window as any).sessionFeatureFlags[parentFlag][flag] = !currentValue;
+    window.log.debug(`[debugMenu] toggled ${parentFlag}.${flag} to ${!currentValue}`);
+  } else {
+    (window as any).sessionFeatureFlags[flag] = !currentValue;
+    window.log.debug(`[debugMenu] toggled ${flag} to ${!currentValue}`);
+  }
+
+  forceUpdate();
+};
+
+const FlagToggle = ({
+  forceUpdate,
+  flag,
+  value,
+  parentFlag,
+}: {
+  forceUpdate: () => void;
+  flag: SessionFeatureFlagsKeys;
+  value: any;
+  parentFlag?: SessionFeatureFlagsKeys;
+}) => {
+  const key = `feature-flag-toggle${parentFlag ? `-${parentFlag}` : ''}-${flag}`;
+  return (
+    <Flex
+      key={key}
+      id={key}
+      container={true}
+      width="100%"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <span>
+        {flag}
+        {untestedFlags.includes(flag) ? <HintText>Untested</HintText> : null}
+      </span>
+      <SessionToggle
+        active={value}
+        onClick={() => void handleFeatureFlagToggle(forceUpdate, flag, parentFlag)}
+      />
+    </Flex>
+  );
+};
+
+export const FeatureFlags = ({ flags }: { flags: Record<string, any> }) => {
+  const forceUpdate = useUpdate();
+  return (
+    <Flex
+      container={true}
+      width={'100%'}
+      flexDirection="column"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+      flexGap="var(--margins-xs)"
+    >
+      <Flex container={true} alignItems="center">
+        <h2>Feature Flags</h2>
+        <HintText>Experimental</HintText>
+      </Flex>
+      <i>
+        Changes are temporary. You can clear them by reloading the window or restarting the app.
+      </i>
+      <SpacerXS />
+      {Object.entries(flags).map(([key, value]) => {
+        const flag = key as SessionFeatureFlagsKeys;
+        if (unsupportedFlags.includes(flag)) {
+          return null;
+        }
+
+        if (!isBoolean(value)) {
+          return (
+            <>
+              <h3>{flag}</h3>
+              {Object.entries(value).map(([k, v]: [string, any]) => {
+                const nestedFlag = k as SessionFeatureFlagsKeys;
+                return (
+                  <FlagToggle
+                    forceUpdate={forceUpdate}
+                    flag={nestedFlag}
+                    value={v}
+                    parentFlag={flag}
+                  />
+                );
+              })}
+            </>
+          );
+        }
+        return <FlagToggle forceUpdate={forceUpdate} flag={flag} value={value} />;
+      })}
+    </Flex>
+  );
+};

ts/components/dialog/debug/components.tsx

@@ -1,13 +1,9 @@
-import { isBoolean } from 'lodash';
-import useUpdate from 'react-use/lib/useUpdate';
 import useAsync from 'react-use/lib/useAsync';
 import { shell } from 'electron';
 import useBoolean from 'react-use/lib/useBoolean';
 import { useDispatch } from 'react-redux';
-import type { SessionFeatureFlagsKeys } from '../../../window';
 import { Flex } from '../../basic/Flex';
-import { SessionToggle } from '../../basic/SessionToggle';
-import { HintText, SpacerXS } from '../../basic/Text';
+import { SpacerXS } from '../../basic/Text';
 import { localize } from '../../../localization/localeTools';
 import { CopyToClipboardIcon } from '../../buttons';
 import { saveLogToDesktop } from '../../../util/logging';
@@ -103,111 +99,6 @@ export const DebugActions = () => {
   );
 };
 
-const unsupportedFlags = ['useTestNet'];
-const untestedFlags = ['useOnionRequests', 'useClosedGroupV3', 'replaceLocalizedStringsWithKeys'];
-
-const handleFeatureFlagToggle = async (
-  forceUpdate: () => void,
-  flag: SessionFeatureFlagsKeys,
-  parentFlag?: SessionFeatureFlagsKeys
-) => {
-  const currentValue = parentFlag
-    ? (window as any).sessionFeatureFlags[parentFlag][flag]
-    : (window as any).sessionFeatureFlags[flag];
-
-  if (parentFlag) {
-    (window as any).sessionFeatureFlags[parentFlag][flag] = !currentValue;
-    window.log.debug(`[debugMenu] toggled ${parentFlag}.${flag} to ${!currentValue}`);
-  } else {
-    (window as any).sessionFeatureFlags[flag] = !currentValue;
-    window.log.debug(`[debugMenu] toggled ${flag} to ${!currentValue}`);
-  }
-
-  forceUpdate();
-};
-
-const FlagToggle = ({
-  forceUpdate,
-  flag,
-  value,
-  parentFlag,
-}: {
-  forceUpdate: () => void;
-  flag: SessionFeatureFlagsKeys;
-  value: any;
-  parentFlag?: SessionFeatureFlagsKeys;
-}) => {
-  const key = `feature-flag-toggle${parentFlag ? `-${parentFlag}` : ''}-${flag}`;
-  return (
-    <Flex
-      key={key}
-      id={key}
-      container={true}
-      width="100%"
-      alignItems="center"
-      justifyContent="space-between"
-    >
-      <span>
-        {flag}
-        {untestedFlags.includes(flag) ? <HintText>Untested</HintText> : null}
-      </span>
-      <SessionToggle
-        active={value}
-        onClick={() => void handleFeatureFlagToggle(forceUpdate, flag, parentFlag)}
-      />
-    </Flex>
-  );
-};
-
-export const FeatureFlags = ({ flags }: { flags: Record<string, any> }) => {
-  const forceUpdate = useUpdate();
-  return (
-    <Flex
-      container={true}
-      width={'100%'}
-      flexDirection="column"
-      justifyContent="flex-start"
-      alignItems="flex-start"
-      flexGap="var(--margins-xs)"
-    >
-      <Flex container={true} alignItems="center">
-        <h2>Feature Flags</h2>
-        <HintText>Experimental</HintText>
-      </Flex>
-      <i>
-        Changes are temporary. You can clear them by reloading the window or restarting the app.
-      </i>
-      <SpacerXS />
-      {Object.entries(flags).map(([key, value]) => {
-        const flag = key as SessionFeatureFlagsKeys;
-        if (unsupportedFlags.includes(flag)) {
-          return null;
-        }
-
-        if (!isBoolean(value)) {
-          return (
-            <>
-              <h3>{flag}</h3>
-              {Object.entries(value).map(([k, v]: [string, any]) => {
-                const nestedFlag = k as SessionFeatureFlagsKeys;
-                return (
-                  <FlagToggle
-                    forceUpdate={forceUpdate}
-                    flag={nestedFlag}
-                    value={v}
-                    parentFlag={flag}
-                  />
-                );
-              })}
-            </>
-          );
-        }
-        return <FlagToggle forceUpdate={forceUpdate} flag={flag} value={value} />;
-      })}
-    </Flex>
-  );
-};
-
 export const AboutInfo = () => {
   const environmentStates = [];