feat: use startup-injected feature toggle state in ConfigToolbar instead of re-parsing location search

Author: screendriver

apps/webapp/src/script/components/ConfigToolbar/ConfigToolbar.tsx

@@ -26,14 +26,20 @@ import {Button, Input, Switch} from '@wireapp/react-ui-kit';
 
 import {ConversationState} from 'Repositories/conversation/ConversationState';
 import {Config, Configuration} from 'src/script/Config';
+import {StartupFeatureToggleName, startupFeatureToggleNames} from 'src/script/featureToggles/startupFeatureToggleNames';
+import {updateLocationSearchForStartupFeatureToggle} from 'src/script/featureToggles/startupFeatureToggleQueryParameters';
 import {useClickOutside} from 'src/script/hooks/useClickOutside';
 import {useApplicationContext} from 'src/script/page/RootProvider';
 import {CoreCryptoLogLevel} from 'Util/debugUtil';
 
 import {wrapperStyles} from './ConfigToolbar.styles';
 
+export function createLocationUrl(pathname: string, search: string, hash: string): string {
+  return `${pathname}${search}${hash}`;
+}
+
 export function ConfigToolbar() {
-  const {fireAndForgetInvoker} = useApplicationContext();
+  const {fireAndForgetInvoker, applicationNavigation, isFeatureToggleEnabled} = useApplicationContext();
   const [showConfig, setShowConfig] = useState(false);
   const [isResettingMLSConversation, setIsResettingMLSConversation] = useState(false);
   const [isGzipEnabled, setIsGzipEnabled] = useState(window.wire?.app.debug?.isGzippingEnabled() ?? false);
@@ -303,6 +309,52 @@ export function ConfigToolbar() {
     );
   };
 
+  function reloadApplicationForStartupFeatureToggle(
+    featureToggleName: StartupFeatureToggleName,
+    shouldEnableFeatureToggle: boolean,
+  ): void {
+    const locationSearch = applicationNavigation.currentSearch;
+    const nextLocationSearch = updateLocationSearchForStartupFeatureToggle({
+      locationSearch,
+      featureToggleName,
+      shouldEnableFeatureToggle,
+    });
+    const locationPathname = applicationNavigation.currentPathname;
+    const locationHash = applicationNavigation.currentHash;
+    const nextLocationUrl = createLocationUrl(locationPathname, nextLocationSearch, locationHash);
+
+    applicationNavigation.navigateTo(nextLocationUrl);
+  }
+
+  function renderStartupFeatureToggleCheckboxList() {
+    return (
+      <fieldset style={{margin: 0, border: 0, padding: 0}}>
+        <legend style={{fontWeight: 'bold', marginBottom: '8px'}}>Startup Feature Toggles</legend>
+        <ul style={{listStyle: 'none', margin: 0, padding: 0}}>
+          {startupFeatureToggleNames.map(featureToggleName => {
+            const featureToggleCheckboxIdentifier = `startup-feature-toggle-checkbox-${featureToggleName}`;
+
+            return (
+              <li key={featureToggleName} style={{marginBottom: '10px'}}>
+                <label htmlFor={featureToggleCheckboxIdentifier} style={{display: 'block'}}>
+                  <input
+                    id={featureToggleCheckboxIdentifier}
+                    type="checkbox"
+                    checked={isFeatureToggleEnabled(featureToggleName)}
+                    onChange={event => {
+                      reloadApplicationForStartupFeatureToggle(featureToggleName, event.currentTarget.checked);
+                    }}
+                  />
+                  {` ${featureToggleName}`}
+                </label>
+              </li>
+            );
+          })}
+        </ul>
+      </fieldset>
+    );
+  }
+
   const resetMLSConversation = async () => {
     setIsResettingMLSConversation(true);
     try {
@@ -359,6 +411,10 @@ export function ConfigToolbar() {
 
       <hr />
 
+      <div>{renderStartupFeatureToggleCheckboxList()}</div>
+
+      <hr />
+
       <h3>Message Automation</h3>
       <Input
         type="text"