Preview and Draft support (#99)

Author: bryce-fitzsimons

README.md

@@ -64,6 +64,11 @@ Some notes
 
 ## Changelog
 
+*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
+- Show feature descriptions and other meta information from the API
+
 *1.1.0* (2025-03-11)
 - Share DevTools session by link
 - Import/export DevTools session by JSON blob

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gb-devtools",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "dev": "webpack --config webpack/webpack.dev.js --watch",
@@ -40,8 +40,10 @@
     "query-string": "^9.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "remark-gfm": "^4.0.1",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.3.0",
+    "react-markdown": "^10.1.0",
     "react-select": "^5.10.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",

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.0",
+  "version": "1.1.1",
 
   "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.0",
+  "version": "1.1.1",
 
   "browser_specific_settings": {
     "gecko": {

src/app/components/EditableValueField.tsx

@@ -9,10 +9,12 @@ export default function EditableValueField({
   value,
   setValue,
   valueType = "string",
+  resetInputOnChange = false,
 }: {
   value: any;
   setValue: (v: any) => void;
   valueType?: ValueType;
+  resetInputOnChange?: boolean;
 }) {
   const [forcedValueType, setForcedValueType] = useState<ValueType>(valueType);
   const formattedValue =
@@ -41,7 +43,17 @@ export default function EditableValueField({
   }, []);
 
   useEffect(() => {
-    if (!editing) {
+    if (valueType) {
+      setForcedValueType(valueType);
+      if (valueType !== "json" && valueType !== "unknown") {
+        setEditing(true);
+      }
+    }
+  }, [valueType]);
+
+  // underlying value changes, reset the field?
+  useEffect(() => {
+    if (!editing || resetInputOnChange) {
       setEditedValue(formattedValue);
     }
   }, [value]);
@@ -124,7 +136,7 @@ export default function EditableValueField({
           <input
             className="rt-reset rt-TextFieldInput"
             type="number"
-            value={editedValue}
+            value={editedValue ?? ""}
             onChange={(e) => {
               const v = e.target.value;
               setEditedValue(v);
@@ -165,7 +177,7 @@ export default function EditableValueField({
         >
           <TextareaAutosize
             name={"__JSON_value__"}
-            value={editedValue}
+            value={editedValue ?? ""}
             onChange={(e) => {
               const v = e.target.value;
               setEditedValue(v);

src/app/components/ExperimentDetail.tsx

@@ -36,6 +36,8 @@ import { AutoExperimentVariation, isURLTargeted } from "@growthbook/growthbook";
 import clsx from "clsx";
 import DebugLogger, { DebugLogAccordion } from "@/app/components/DebugLogger";
 import { TbEyeSearch } from "react-icons/tb";
+import useApi from "@/app/hooks/useApi";
+import { SDKAttribute } from "@/app/gbTypes";
 
 export default function ExperimentDetail({
   selectedEid,
@@ -171,7 +173,7 @@ export default function ExperimentDetail({
         <div className="content">
           {selectedExperiment?.experiment?.isDraft ? (
             <Callout.Root
-              color="cyan"
+              color="indigo"
               size="1"
               className="py-1.5 px-2 mt-2 mb-4"
             >

src/app/components/ExperimentsTab.tsx

@@ -29,6 +29,7 @@ export type ExperimentWithFeatures = (AutoExperiment | Experiment<any>) & {
   features?: string[];
   featureTypes?: Record<string, ValueType>;
   isDraft?: boolean;
+  isInactive?: boolean;
 };
 
 export const LEFT_PERCENT = 0.4;
@@ -286,7 +287,7 @@ export default function ExperimentsTab() {
                     forced={isForced}
                     type="experiment"
                   />
-                  {selectedExperiment?.experiment?.isDraft ? (
+                  {experiment?.isDraft ? (
                     <TbEyeSearch
                       className="inline-block mr-1 opacity-50"
                       size={12}
@@ -305,28 +306,28 @@ export default function ExperimentsTab() {
                     <div className="flex items-center gap-2 pr-0.5">
                       {types.redirect ? (
                         <Tooltip content="URL Redirect experiment">
-                          <button>
+                          <span>
                             <PiLinkBold size={12} />
-                          </button>
+                          </span>
                         </Tooltip>
                       ) : null}
                       {types.visual ? (
                         <Tooltip content="Visual Editor experiment">
-                          <button>
+                          <span>
                             <PiDesktopFill size={12} />
-                          </button>
+                          </span>
                         </Tooltip>
                       ) : null}
                       {types.features ? (
                         <Tooltip content="Feature flag experiment">
-                          <button>
+                          <span>
                             <PiFlagFill className="inline-block" size={12} />
                             {fullWidthListView ? (
                               <span className="ml-1">
                                 {types.features.length}
                               </span>
                             ) : null}
-                          </button>
+                          </span>
                         </Tooltip>
                       ) : null}
                     </div>