fix: experimental features not reloading after toggling (#917)

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

app/assets/javascripts/preferences/panes/general-segments/Labs.tsx

@@ -14,16 +14,41 @@ import { useCallback, useEffect, useState } from 'preact/hooks';
 import { usePremiumModal } from '@/components/Premium';
 import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 
+type ExperimentalFeatureItem = {
+  identifier: FeatureIdentifier;
+  name: string;
+  description: string;
+  isEnabled: boolean;
+  isEntitled: boolean;
+};
+
 type Props = {
   application: WebApplication;
 };
 
 export const LabsPane: FunctionComponent<Props> = ({ application }) => {
-  const [experimentalFeatures, setExperimentalFeatures] =
+  const [experimentalFeatures, setExperimentalFeatures] = useState<
-    useState<FeatureIdentifier[]>();
+    ExperimentalFeatureItem[]
+  >([]);
 
   const reloadExperimentalFeatures = useCallback(() => {
-    const experimentalFeatures = application.features.getExperimentalFeatures();
+    const experimentalFeatures = application.features
+      .getExperimentalFeatures()
+      .map((featureIdentifier) => {
+        const feature = FindNativeFeature(featureIdentifier);
+        return {
+          identifier: featureIdentifier,
+          name: feature?.name ?? featureIdentifier,
+          description: feature?.description ?? '',
+          isEnabled:
+            application.features.isExperimentalFeatureEnabled(
+              featureIdentifier
+            ),
+          isEntitled:
+            application.features.getFeatureStatus(featureIdentifier) ===
+            FeatureStatus.Entitled,
+        };
+      });
     setExperimentalFeatures(experimentalFeatures);
   }, [application.features]);
 
@@ -33,42 +58,23 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
 
   const premiumModal = usePremiumModal();
 
-  if (!experimentalFeatures) {
-    return (
-      <div className="flex items-center justify-between">
-        No experimental features available.
-      </div>
-    );
-  }
-
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Labs</Title>
         <div>
-          {experimentalFeatures?.map(
+          {experimentalFeatures.map(
-            (featureIdentifier: FeatureIdentifier, index: number) => {
+            (
-              const feature = FindNativeFeature(featureIdentifier);
+              { identifier, name, description, isEnabled, isEntitled },
-              const featureName = feature?.name ?? featureIdentifier;
+              index: number
-              const featureDescription = feature?.description ?? '';
+            ) => {
-
-              const isFeatureEnabled =
-                application.features.isExperimentalFeatureEnabled(
-                  featureIdentifier
-                );
-
               const toggleFeature = () => {
-                const isEntitled =
-                  application.features.getFeatureStatus(featureIdentifier) ===
-                  FeatureStatus.Entitled;
                 if (!isEntitled) {
-                  premiumModal.activate(featureName);
+                  premiumModal.activate(name);
                   return;
                 }
 
-                application.features.toggleExperimentalFeature(
+                application.features.toggleExperimentalFeature(identifier);
-                  featureIdentifier
-                );
                 reloadExperimentalFeatures();
               };
 
@@ -80,13 +86,10 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
                 <>
                   <div className="flex items-center justify-between">
                     <div className="flex flex-col">
-                      <Subtitle>{featureName}</Subtitle>
+                      <Subtitle>{name}</Subtitle>
-                      <Text>{featureDescription}</Text>
+                      <Text>{description}</Text>
                     </div>
-                    <Switch
+                    <Switch onChange={toggleFeature} checked={isEnabled} />
-                      onChange={toggleFeature}
-                      checked={isFeatureEnabled}
-                    />
                   </div>
                   {showHorizontalSeparator && (
                     <HorizontalSeparator classes="mt-5 mb-3" />
@@ -95,6 +98,13 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
               );
             }
           )}
+          {experimentalFeatures.length === 0 && (
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Text>No experimental features available.</Text>
+              </div>
+            </div>
+          )}
         </div>
       </PreferencesSegment>
     </PreferencesGroup>