improve debug log -> rule association, persist search input

Author: bryce-fitzsimons

README.md

@@ -64,6 +64,10 @@ Some notes
 
 ## Changelog
 
+*1.1.2* (2025-03-25)
+- Persist feature and experiment search filter
+- Bug fix: Improve association of debug logs to feature rules
+
 *1.1.1* (2025-03-17)
 - Choose between live, draft, and inactive revisions of features using the GrowthBook API
 - Quickly apply feature overrides from feature rules

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gb-devtools",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "scripts": {
     "dev": "webpack --config webpack/webpack.dev.js --watch",

public/manifest.chrome.json

@@ -3,7 +3,7 @@
 
   "name": "GrowthBook DevTools",
   "description": "GrowthBook DevTools helps you debug feature flags and experiments and design A/B tests visually — all from your browser.",
-  "version": "1.1.1",
+  "version": "1.1.2",
 
   "content_scripts": [
     {

public/manifest.firefox.json

@@ -3,7 +3,7 @@
 
   "name": "GrowthBook DevTools",
   "description": "GrowthBook DevTools helps you debug feature flags and experiments and design A/B tests visually — all from your browser.",
-  "version": "1.1.1",
+  "version": "1.1.2",
 
   "browser_specific_settings": {
     "gecko": {

src/app/components/DebugLogger.tsx

@@ -10,10 +10,12 @@ export default function DebugLogger({
   logs,
   startCollapsed = true,
   showContext = true,
+  showCount = false,
 }: {
   logs?: DebugLog[];
   startCollapsed?: boolean;
   showContext?: boolean;
+  showCount?: boolean;
 }) {
   const [collapsed, setCollapsed] = useState(startCollapsed);
 
@@ -34,6 +36,9 @@ export default function DebugLogger({
             size={12}
           />
           Debug log
+          {showCount ? (<>
+            {" "}({logs?.length || 0})
+          </>) : null}
         </Link>
       </div>
       {!collapsed && (

src/app/components/ExperimentsTab.tsx

@@ -107,13 +107,19 @@ export default function ExperimentsTab() {
   const [hideInactiveExperiments, setHideInactiveExperiments] =
     useTabState<boolean>("hideInactiveExperiments", false);
 
+  const [searchValue, setSearchValue] = useTabState<string>(
+    "experimentsSearchValue",
+    ""
+  );
+
   const {
     items: filteredExperiments,
     searchInputProps,
     clear: clearSearch,
   } = useSearch({
     items: allExperiments,
     defaultSortField: "key",
+    searchValueTuple: [searchValue, setSearchValue],
   });
 
   const sortedFilteredExperiments = useMemo(

src/app/components/FeatureDetail.tsx

@@ -588,7 +588,6 @@ export default function FeatureDetail({
                   <Rule
                     key={i}
                     rule={rule}
-                    rules={selectedFeature.feature.rules || []}
                     i={i}
                     fid={selectedFid}
                     valueType={selectedFeature.valueType}

src/app/components/FeaturesTab.tsx

@@ -102,13 +102,19 @@ export default function FeaturesTab() {
     false,
   );
 
+  const [searchValue, setSearchValue] = useTabState<string>(
+    "featuresSearchValue",
+    ""
+  );
+
   const {
     items: filteredFeatures,
     searchInputProps,
     clear: clearSearch,
   } = useSearch({
     items: allFeatures,
     defaultSortField: "id",
+    searchValueTuple: [searchValue, setSearchValue],
   });
 
   const sortedFilteredFeatures = useMemo(

src/app/components/Rule.tsx

@@ -39,7 +39,6 @@ export const GLOBAL_OVERRIDE = "Global override"; // FF override
 
 export default function Rule({
   rule,
-  rules,
   i,
   fid,
   valueType = "string",
@@ -48,7 +47,6 @@ export default function Rule({
   onApply,
 }: {
   rule: FeatureRule;
-  rules: FeatureRule[];
   i: number;
   fid: string;
   valueType?: ValueType;
@@ -67,37 +65,10 @@ export default function Rule({
   const [jsonMode, setJsonMode] = useState(false);
 
   const debug = evaluatedFeature?.debug || [];
-  const debugForRule = useMemo(() => {
-    const d: DebugLog[] = [];
-    let r = 0; // current parent rule number
-    debug.forEach((item, itemNo) => {
-      const nextItem = debug?.[itemNo + 1];
-      // Skip tracking callbacks
-      // if (item?.[0].startsWith("Tracking callback")) return;
-      // If the log id matches our feature's id, assume we can rely on the log's
-      // rule number (i).
-      if (item?.[1]?.id === fid && item?.[1]?.rule?.i !== undefined) {
-        r = item[1].rule.i as number;
-      }
-      // Probably an experiment rule (no rule, has id, id doesn't match),
-      // assume this log belongs to current feature's next rule.
-      if (
-        !item?.[1]?.rule &&
-        item?.[1]?.id &&
-        item[1].id !== fid &&
-        itemNo > 0 &&
-        // these get lumped in the wrong rule otherwise
-        !nextItem?.[0]?.startsWith("Skip rule because prerequisite") &&
-        !nextItem?.[0]?.startsWith("Feature blocked")
-      ) {
-        r++;
-      }
-      if (r === i) {
-        d.push(item);
-      }
-    });
-    return d;
-  }, [fid, i, debug]);
+  const debugForRule = useMemo(
+    () => debug.filter((d) => d?.[1]?.i === i),
+    [fid, i, debug]
+  );
 
   let status: "skipped" | "unreachable" | "matches" | "gates" | "overridden" =
     "skipped";
@@ -275,7 +246,7 @@ export default function Rule({
         />
       )}
       <div className="pt-1 border-t border-t-gray-a6">
-        <DebugLogger startCollapsed={true} logs={debugForRule} />
+        <DebugLogger startCollapsed={true} logs={debugForRule} showCount={true} />
       </div>
     </div>
   );

src/app/components/SdkTab/index.tsx

@@ -122,7 +122,6 @@ export default function SdkTab() {
             title="Status"
             status={canConnectStatus}
             color={canConnectStatusColor}
-            showCaret={isResponsive}
           />
         </div>
 
@@ -144,7 +143,6 @@ export default function SdkTab() {
                     : "")
                 }
                 color={versionStatusColor}
-                showCaret={isResponsive}
               />
             </div>
 
@@ -159,7 +157,6 @@ export default function SdkTab() {
                 title="Tracking Callback"
                 status={trackingCallbackStatus}
                 color={trackingCallbackStatusColor}
-                showCaret={isResponsive}
               />
             </div>
 
@@ -174,7 +171,6 @@ export default function SdkTab() {
                 title="Payload Security"
                 status={securityStatus}
                 color="gray"
-                showCaret={isResponsive}
               />
             </div>
 
@@ -189,7 +185,6 @@ export default function SdkTab() {
                 title="Sticky Bucketing"
                 status={usingStickyBucketing}
                 color="gray"
-                showCaret={isResponsive}
               />
             </div>
 
@@ -204,7 +199,6 @@ export default function SdkTab() {
                 title="Streaming"
                 status={streaming}
                 color="gray"
-                showCaret={isResponsive}
               />
             </div>
 
@@ -219,7 +213,6 @@ export default function SdkTab() {
                 title="SDK Payload"
                 status={hasPayload}
                 color="gray"
-                showCaret={isResponsive}
               />
             </div>
 
@@ -234,7 +227,6 @@ export default function SdkTab() {
                 title="Log Event Callback"
                 status={usingLogEvent}
                 color="gray"
-                showCaret={isResponsive}
               />
             </div>
 
@@ -249,7 +241,6 @@ export default function SdkTab() {
                 title="On Feature Usage Callback"
                 status={usingOnFeatureUsage}
                 color="gray"
-                showCaret={isResponsive}
               />
             </div>
           </>
@@ -273,12 +264,10 @@ function ItemStatus({
   title,
   status,
   color,
-  showCaret,
 }: {
   title: string;
   status?: string | boolean;
   color: "green" | "red" | "gray" | "orange";
-  showCaret: boolean;
 }) {
   if (typeof status === "boolean") {
     status = status ? "Yes" : "No";
@@ -288,11 +277,7 @@ function ItemStatus({
       <div className="title pl-4 pr-6">{title}</div>
       <div className="flex pr-4 items-center flex-shrink-0 text-sm">
         <Text color={color}>{status}</Text>
-        {showCaret && (
-          <div className="ml-5 font-bold">
-            <PiCaretRight />
-          </div>
-        )}
+        <PiCaretRight className="ml-5 text-gray-10" />
       </div>
     </>
   );